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

ホームボタンを押した時の強さを変更iPhone 7/7 Plusでホームボタンを押した時の強さを変更する設定方法前のページ

検索機能がついたセレクトボックスを実装できる「multi.js」次のページmulti.js

関連記事

  1. Blindify
  2. No Vacancy

    JavaScript

    ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」

    テキストにネオンサインのようなエフェクトを実装することができるjQue…

  3. no-image

    JavaScript

    フルスクリーンによるjQueryモーダルウィンドウ実装「FullMod」

    FullModはフルスクリーンによるモーダルウィンドウを実装できるjQ…

  4. FlexSlider

    JavaScript

    jQueryプラグインのレスポンシブな軽量スライダー「FLEXSLIDER」の使い方や設定方法

    すごくいいですね、これ。スマートフォンにも対応させたいスライダーを探し…

  5. makefixed.js

    JavaScript

    スクロール中に要素を固定配置できるjQueryプラグイン「makefixed.js」

    makefixed.jsはスクロール中に指定した要素を固定配置させるこ…

  6. no-image

    JavaScript

    要素ごとにスクロールできるjQueryプラグイン「snapScroll.js」

    snapScroll.jsは要素ごとにきりのいいところでスクロールされ…

最近の記事

  1. 冬用のふとん
  2. 田沢湖
  3. ゴムの耳栓
  4. ライオンコーヒー(バニラマカダミア)
PAGE TOP