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. flexible-bootstrap-carousel
  2. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  3. diamonds.js
  4. Custom Carousel

    JavaScript

    カードスタイルのカルーセル・スライダー実装「Custom Carousel」

    Custom Carouselはカードスタイルによるシンプルなカルーセ…

  5. vTicker

    JavaScript

    シンプルで使い方も簡単!垂直ティッカーを実装できるjQueryプラグイン「vTicker」

    シンプルで使い方も簡単な垂直ティッカーを実装できるjQueryプラグイ…

  6. no-image

    JavaScript

    シンプルでベーシックなJavaScriptによるlightbox実装「halkaBox.js」

    halkaBox.jsは、シンプルでベーシックなJavaScriptに…

最近の記事

  1. macOS Mojaveのダークモード
  2. Olli
  3. 単語帳メーカー(Flashcard Maker App)
  4. 1Password 7

Facebookページ

PAGE TOP