universal-tilt.js

JavaScript

パララックスなど多彩なチルト効果を実装できる「universal-tilt.js」

universal-tilt.jsはパララックスやスケールなど多彩なチルト効果を実装できるjQueryプラグインです。ホバーしてカーソルを動かすことで、それに連動する形でチルトします。インタラクティブなホバーチルトエフェクトを実装したい人にピッタリですね。

設定でモバイルにも対応

デモ

デモではさまざまなタイプのチルトエフェクトが用意されています。Shine、Scale、Parallax、Disable X、Disable Y、Reset (Only desktop)、Reverse、Position base (Only desktop)、Disable tilt on mobile、Change eventです。

ホバーしているところがシャインで光ったりパララックス効果を加えたり、カスタマイズ次第でいろんなエフェクトを取り入れれるのがいいですね。デスクトップだけでなく設定でモバイルに対応できるところもグッドです。

またオプションも豊富で、position-base、reset、mobile、shine、shine-opacity、shine-save、max、perspective、scale、disabled、reverse、speed、easing……などの項目が用意されているほか、X・Y・角度のアウトプットによるイベント設定も可能です。

universal-tilt.js

関連記事

  1. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

  2. busy-load

    JavaScript

    シンプルでフレキシブルなローディングマスクプラグイン「busy-load」

    busy-loadはシンプルでフレキシブルなローディングマスクを実装す…

  3. jQuery Gridly

    JavaScript

    クリックしてその場で拡大したりドラッグで配置を入れ替えたりできるプラグイン「jQuery Gridl…

    おもしろいjQueryプラグインがあったのでご紹介します。クリックして…

  4. JavaScript

    ページ内のリンクをスムーズに移動できるsmoothScroll.jsを使ってみた

    ページ内のリンクをスムーズに移動してくれる「smoothScroll.…

  5. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  6. Multi-level push menu

最近の記事

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

アーカイブ

PAGE TOP