パネル、カード、ボタンなどのUI要素をふわりと浮かせ、視差効果を与えるJavaScriptの超軽量ライブラリ -vanilla-tilt.js

パネル、カード、ボタンなどのUI要素をユーザーの操作にあわせて、ふわりと浮かせ、アニメーションで気持ちよく動かして視差効果を与えるJavaScriptの超軽量ライブラリを紹介します。

実装は簡単で、HTMLを汚さずに実装することもできます。

パネル、カード、ボタンなどのUI要素をふわりと浮かせ、3Dの視差効果を与えるJavaScriptの超軽量ライブラリ -vanilla-tilt.js

vanilla-tilt.js
vanilla-tilt.js -GitHub

vanilla-tilt.jsの特徴

vanilla-tilt.jsは、Tilt.js(jQueryバージョン)からフォークされたスムーズな3Dチルトを簡単に実装できるJavaScriptライブラリです。

  • 滑らかなアニメーション
  • 軽量
  • 60fps
  • バニラJavaScript(依存関係はありません)
  • 実装は簡単、カスタマイズも簡単
サイトのキャプチャ

vanilla-tilt.js

サイトのキャプチャ

vanilla-tilt.js

vanilla-tilt.jsのデモ

デモでは基本的なアニメーションをはじめ、パララックス、グレアなどの効果、ホバー時にサイズを大きくしたり、ホバーをはずしても傾きをそのままにしておくこともできます。

サイトのキャプチャ

vanilla-tilt.js: demo

サイトのキャプチャ

vanilla-tilt.js: demo

サイトのキャプチャ

vanilla-tilt.js: demo

サイトのキャプチャ

vanilla-tilt.js: demo

vanilla-tilt.jsの使い方

セットアップ

当スクリプトを外部ファイルとして記述し、data属性を加えます。
data属性なしで使用することもできます(後述)。

オプション

あとは、data属性にアニメーションの設定をするだけです。

オプションでは、さまざまなエフェクトが用意されています。

HTMLは汚さずに(data属性なしで)、使用することもできます。

sponsors

top of page

©2021 coliss