パララックスとチルトを兼ね備えたホバーエフェクト実装「Tilt.js」

Tilt.js

Tilt.jsはパララックスとチルトの動きを兼ね備えた滑らかなホバーエフェクトを実装することができるjQueryプラグインです。60fpsによるrequestAnimationFrameが使われているとのこと。ファイル容量もコンパクトなところがいいですね。

Tilt.js

デモ

デモページには「Tilt.js」と書かれた正方形が表示されており、ここにホバーしながらカーソルを動かすことで、それに合わせてパララックスとチルトのアニメーションを見ることができます。

あまり見たことがない珍しい動きをするので、ユーザーにとっては印象に残りやすいかもしれませんね。チルトをすることで、グラデーションカラーが変化するところもおもしろいと思います。

また、Tilt.jsにはオプションもいろいろ用意されています。主なオプションは、maxTilt、perspective、easing、scale、speed、transition、axis、reset、glare、maxGlareです。

細かい動きのカスタマイズもオプションから手軽に調節できるので、カスタマイズして使いたい人にはうれしいポイントになるのではないでしょうか?

ちなみに、jQueryバージョンの他にも、Vanilla JSバージョンも用意されています。

というわけで、パララックスとチルトのアニメーションによるホバーエフェクトを実装したい方は、ぜひTilt.jsを活用されてみてはいかがですか?

Tilt.js

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives