Tilt.js

JavaScript

パララックスとチルトを兼ね備えたホバーエフェクト実装「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

関連記事

  1. jQuery Seat Charts
  2. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

  3. Grasp Mobile Progress Circle
  4. awNotices

    JavaScript

    スタート・ストップ機能がついたシンプルなjQueryニュースティッカー「awNotices」

    awNoticesはスタート・ストップ機能がついたシンプルに切り替わる…

  5. Viewer

    JavaScript

    画像の拡大や縮小、回転などができるイメージギャラリー「Viewer」

    Viewerは画像の拡大や縮小、回転、上下左右の切り替えといった機能を…

  6. Simply Modal Box

最近の記事

  1. ブラジルイパネマ
  2. 梅しば
  3. BM-IBCDH13RD
  4. 雪
  5. ホットのドリップ

アーカイブ

PAGE TOP