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

no-imageセクション間をスムーズにスクロールできる「Scroll Control」前のページ

背景にあわせてテキストを見やすく挿入できるiPhoneアプリ「This by Tinrocket」次のページThis by Tinrocket

関連記事

  1. AnimatedSlideNav

    JavaScript

    動きがオシャレなアニメーションのサイドナビゲーション「AnimatedSideNav」

    AnimatedSideNavは、動きがオシャレなアニメーションによる…

  2. jquery.enhsplitter

    JavaScript

    コンテンツを分離できるフレーム実装「jquery.enhsplitter」

    jquery.enhsplitterはコンテンツを分離させるフレームを…

  3. CircularLoader.js

    JavaScript

    シンプルな円形プログレスバーを簡単に実装できる「CircularLoader.js」

    CircularLoader.jsは円形プログレスバーを簡単に実装する…

  4. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  5. How satisfied are you? Slider
  6. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP