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. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

  2. Rate Yo!

    JavaScript

    星評価(レーティング)を簡単に実装できるjQueryプラグイン「Rate Yo!」

    Rate Yo!というjQueryプラグインを使えば、SVGを使った星…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  4. JavaScript

    リスト化した要素を自分が指定した数に分割できるjQueryプラグイン「Easy List Split…

    リスト化した要素を自分が指定した数に分割できるシンプルだけど便利なjQ…

  5. t.js

    JavaScript

    タイプライターで文字を入力するようなテキストエフェクトのjQueryプラグイン「t.js」

    t.jsというjQueryプラグインを使えば、タイプライターで文字を入…

  6. Vertical Timeline

    JavaScript

    垂直型のシンプルなタイムラインを実装できるjQueryプラグイン「Vertical Timeline…

    Vertical Timelineは、垂直型のシンプルなタイムラインを…

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP