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. 紫陽花とセミの抜けがら
  2. クラブハウスサンド 石窯カンパーニュ
  3. 2022.08.9

  4. 柿の実
PAGE TOP