はじめに

マウスホバー時にエフェクトがかかると楽しいですよね! てことでダイナミックな動きが目を引くホバーエフェクトの紹介です。 その名も、Distortion Hover Effect。画像ホバー時に独特な動きで画像が切り替わり、変位画像を変えることで多様なアニメーションが可能となります。

DEMO

どんな動きになるか、cordropsよりDistortion Hover Effectのページにあるデモをご覧ください。 DEMO 簡単ですが試しに僕も作ってみました。 DEMO

実装していく

下記よりライブラリが提供されています。気になる方はチェックしてみてください。 WebGL Distortion Hover Effects | Codrops

さいごに

応用すると下記ページのような動きもできちゃうみたいです。クールですね〜。 https://glslp-project.jp/distortion https://two.zero.nyc/

参考ページ

https://tympanus.net/codrops/2018/04/10/webgl-distortion-hover-effects/