[JS]マイクロインタラクションを簡単に！よく使うUIエレメントに操作している感覚をアニメーションで与えるスクリプト -Tilt
Post on:2017年1月30日
sponsors
カード、パネル、ボタンなど、よく使うUIエレメントをユーザーの操作に応じてふわりと浮かせ、アニメーションでぐりぐりと動かして視差効果を与えるJavaScriptの超軽量ライブラリ（jQueryのプラグインも可）を紹介します。
CSSアニメーションが苦手なグラデーションやシャドウでも60fpsの滑らかな動きを実現します。
Tilt.js -GitHub
このアニメーションGIFは軽量化のためコマを落としているので、実際の滑らかな動きは下記のデモでお楽しみください。
Tilt.jsの使い方
Tilt.jsは単体でも、jQueryのプラグインとしても動作します。
※スクリプトがそれぞれ異なります。
基本書式
HTMLに「data-tilt」を加え、当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 |
<!DOCTYPE html> <body> <div data-tilt></div> <script src="vanilla-tilt.js"></script> </body> |
jQueryのプラグインとして使用する場合は、下記のように記述します。
|
1 2 3 4 5 6 |
<!DOCTYPE html> <body> <div data-tilt></div> <script src="jquery.js" ></script> <script src="tilt.js"></script> </body> |
実装例
実際のデモを見ながら、実装方法を紹介します。
CSSアニメーションが苦手とするlinear-gradientとbox-shadowを使用しました。
まずは基本のぐりぐり動くエフェクト。
「data-tilt」を加えるだけでもいいのですが、それだと動きが小さいので、少し大きめの動きに設定しました。
|
1 |
<span class="js-tilt">Tilt.jsの使い方</span> |
HTMLはspan要素でもdiv要素でもa要素でも、何でもOK。
|
1 2 3 4 5 |
VanillaTilt.init(document.querySelectorAll(".js-tilt"), { speed: 1000, max: 50, perspective: 300 }); |
オプションでは、下記の項目を設定できます。
|
1 2 3 4 5 6 7 8 |
max: 20, //maxTilt perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets. easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit. scale: 1, // 2 = 200%, 1.5 = 150%, etc.. speed: 300, // Speed of the enter/exit transition. transition: true, // Set a transition on enter/exit. axis: null, // What axis should be disabled. Can be X or Y. reset: true // If the tilt effect has to be reset on exit. |
オプションはスクリプトに記述せずに、data属性に指定することもできます。
|
1 |
<span class="js-tilt2" data-tilt-speed="1000" data-tilt-max="50" data-tilt-perspective="300" data-tilt>Tilt.jsの使い方</span> |
オプションの「reset」を「false」にすると、動かした最後の状態でストップします。
|
1 |
<span class="js-tilt3" data-tilt-reset="false" data-tilt-speed="1000" data-tilt-max="50" data-tilt-perspective="300" data-tilt>Tilt.jsの使い方</span> |
X軸・Y軸のみ動かすことも可能です。
|
1 |
<span class="js-tilt4" data-tilt-axis="x" data-tilt-speed="1000" data-tilt-max="50" data-tilt-perspective="300" data-tilt>Tilt.jsの使い方</span> |
「scale」に値を指定し、拡大させるのも面白いですね。
|
1 |
<span class="js-tilt5" data-tilt-scale="1.2" data-tilt-speed="1000" data-tilt-max="50" data-tilt-perspective="300" data-tilt>Tilt.jsの使い方</span> |
要素のデザインは、CSSで通常通りにスタイルできます。
|
1 2 3 4 5 |
.js-tilt6{ color: #333; background-color: transparent; box-shadow: 0 3px 47px 0 rgba(0, 0, 0, 0.3); } |
sponsors
