jQueryプラグインのgranim.jsを利用します。画像にグラデーションのアニメーション効果を実装できます。
htmlのコードは下記になります。
空のcanvasタグにid=”canvas-image-blending”を付与します。
<div class="granim_contents">
<canvas id="canvas-image-blending"></canvas>
</div>
続いてCSSのコードです。
canvasタグはabsoluteで配置するためcanvasタグを内包するdivタグにposition: relativeを設定します。また画像の高さであるheight: 400pxを設定します。canvasタグにはposition: absoluteに加え、top: 0、left: 0、right: 0、bottom: 0を設定して、縦いっぱい横いっぱいに表示します。
.granim_contents {
position: relative;
height: 400px;
}
#canvas-image-blending {
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
最後にjQueryのコードです。
オプションのisPausedWhenNotInViewをtrueに設定すると、グラデーションが表示領域外の時にアニメーションを一時停止できます。ページをスクロールしてグラデーションが表示領域外になると発動します。また、オプションのblendingModeで画像に適用するグラデーションの合成効果が変更できます。
$(function() {
var granimInstance = new Granim({
element: '#canvas-image-blending',
direction: 'top-bottom',
isPausedWhenNotInView: true,
image : {
source: 'fade.jpg',
blendingMode: 'multiply'
},
states : {
"default-state": {
gradients: [
['#29323c', '#485563'],
['#FF6B6B', '#556270'],
['#80d3fe', '#7ea0c4'],
['#f0ab51', '#eceba3']
],
transitionSpeed: 5000
}
}
});
});