はじめに

今回は、CSSでボタンのアニメはよくあるやつだけど。

マウスホバーで写真をエフェクトしながらアニメーションするやつの紹介・・

hover-effect

URLは下記から・・

https://github.com/robin-dela/hover-effect

使ってみる・・

上記以外に・・下記のライブラリが必要です・・・

おなじみの・・・gsapですね。

https://threejs.org/

https://gsap.com/

サンプルは下記

<div class="my-div"></div>
<script src="js/three.min.js"></script>
<script src="js/gsap.min.js"></script>
<script src="js/hover-effect.umd.js"></script>
<script>
	var myAnimation = new hoverEffect({
		parent: document.querySelector('.my-div'),
		intensity: 0.3,
		image1: '28513415_s.jpg',
		image2: '29240197_s.jpg',
		displacementImage: 'displacement/1.jpg'
	});
</script>

アニメーションする写真1枚目

28513415_s.jpg

アニメーションする写真2枚目

29240197_s.jpg

エフェクトするための効果画像

displacement/1.jpg

エフェクト（ノイズ）サンプル

ノイズサンプル1

ノイズサンプル2

ノイズサンプル3

ノイズサンプル4

ノイズサンプル5

ノイズサンプル6

ノイズサンプル7

ノイズサンプル8

ノイズサンプル9

ノイズサンプル10

ノイズサンプル11

ノイズサンプル12

ノイズサンプル13

ノイズサンプル14

ノイズサンプル15

ノイズサンプル16

本家のサンプル

さいごに

ねたぎれ・・