Webページではユーザのアクションによって様々なエフェクトが可能です。ユーザ自身が分かるアクションとしては文字入力やクリックなどになりますが、他にもウィンドウサイズを変えたり、スクロールでも可能です。 その中で最も簡単そうな、マウスオーバー時にエフェクトを起こすのがDistortion Hover Effectです。しかもそのアニメーションがかなり変わっています。

Distortion Hover Effectの使い方

二つの写真がダイナミックに切り替わります。

色の変化もスムーズです。

アニメーションも様々なパターンが用意されています。

自然に変わっているのが分かります。

これは目をひくでしょう。

Distortion Hover Effectを使うとマウスオーバー時に驚くくらいのエフェクトが可能です。まるで画像が動いているかのように感じられるはずです。テキストを浮かび上がらせたり、切り替えることもできるので、応用範囲が広そうです。

Distortion Hover EffectはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Distortion Hover Effect | Codrops robin-dela/hover-effect: Javascript library to draw and animate images on hover