【フェーダー】画像にグラデーションのアニメーション効果を実装するプラグイン【granim.js】

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
			}
		}
	});
});

タイトルとURLをコピーしました