【granim.js】画像にグラデーション効果を付けられるjQuery

こんにちは、ハル@haru_elpisです。

画像にグラデーション効果を付けられる［granim.js］の紹介です。

granim.jsの使い方

ダウンロード

GitHub - sarcadass/granim.js: Create fluid and interactive gradient animations with this small javascript library.

Create fluid and interactive gradient animations with this s...

github.com

ダウンロードしたフォルダの「dist」フォルダ内にある「granim.min.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

HTML head

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/granim.min.js"></script>

HTML body

<div class="granim_contents">
	<canvas id="canvas-image-blending"></canvas>
</div>

CSS

<style>
.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;
}
</style>

JavaScript

$(function() {
	var granimInstance = new Granim({
		element: '#canvas-image-blending',
		direction: 'top-bottom',
		isPausedWhenNotInView: true,
		image : {
			source: '画像パス',
			blendingMode: 'multiply'
		},
		states : {
			"default-state": {
				gradients: [
					['#29323c', '#485563'],
					['#FF6B6B', '#556270'],
					['#80d3fe', '#7ea0c4'],
					['#f0ab51', '#eceba3']
				],
				transitionSpeed: 5000
			}
		}
	});
});