[JS]マイクロインタラクションを簡単に!よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt

カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、アニメーションでぐりぐりと動かして視差効果を与えるJavaScriptの超軽量ライブラリ(jQueryのプラグインも可)を紹介します。

CSSアニメーションが苦手なグラデーションやシャドウでも60fpsの滑らかな動きを実現します。

デモのキャプチャデモのアニメーション

Tilt.js -GitHub
このアニメーションGIFは軽量化のためコマを落としているので、実際の滑らかな動きは下記のデモでお楽しみください。

Tilt.jsの使い方

Tilt.jsは単体でも、jQueryのプラグインとしても動作します。
※スクリプトがそれぞれ異なります。

基本書式

HTMLに「data-tilt」を加え、当スクリプトを外部ファイルとして記述します。

jQueryのプラグインとして使用する場合は、下記のように記述します。

実装例

実際のデモを見ながら、実装方法を紹介します。
CSSアニメーションが苦手とするlinear-gradientとbox-shadowを使用しました。

Tilt.jsの使い方

まずは基本のぐりぐり動くエフェクト。
「data-tilt」を加えるだけでもいいのですが、それだと動きが小さいので、少し大きめの動きに設定しました。

HTMLはspan要素でもdiv要素でもa要素でも、何でもOK。

オプションでは、下記の項目を設定できます。

Tilt.jsの使い方

オプションはスクリプトに記述せずに、data属性に指定することもできます。

Tilt.jsの使い方

オプションの「reset」を「false」にすると、動かした最後の状態でストップします。

Tilt.jsの使い方

X軸・Y軸のみ動かすことも可能です。

Tilt.jsの使い方

「scale」に値を指定し、拡大させるのも面白いですね。

Tilt.jsの使い方

要素のデザインは、CSSで通常通りにスタイルできます。


top of page

©2017 coliss