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

サイト構築 -JavaScript

Post on:2021年8月25日

vanilla-tilt.jsの特徴

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

滑らかなアニメーション
軽量
60fps
バニラJavaScript（依存関係はありません）
実装は簡単、カスタマイズも簡単

vanilla-tilt.js

vanilla-tilt.jsのデモ

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

vanilla-tilt.js: demo

vanilla-tilt.jsの使い方

セットアップ

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

<body>
<div class="your-element" data-tilt></div>

<!-- at the end of the body -->
<script type="text/javascript" src="vanilla-tilt.js"></script>
</body>

<body>

</body>

オプション

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

<div class="your-element" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="500"></div>

1	<div class="your-element" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="500"></div>

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

{
    reverse:                false,  // reverse the tilt direction
    max:                    35,     // max tilt rotation (degrees)
    startX:                 0,      // the starting tilt on the X axis, in degrees.
    startY:                 0,      // the starting tilt on the Y axis, in degrees.
    perspective:            1000,   // Transform perspective, the lower the more extreme the tilt gets.
    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.
    easing:                 "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
    glare:                  false,   // if it should have a "glare" effect
    "max-glare":            1,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
    "glare-prerender":      false,  // false = VanillaTilt creates the glare elements for you, otherwise
                                    // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
    "mouse-event-element":  null,    // css-selector or link to HTML-element what will be listen mouse events
                                    // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
    gyroscope:              true,    // Boolean to enable/disable device orientation detection,
    gyroscopeMinAngleX:     -45,     // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element;
    gyroscopeMaxAngleX:     45,      // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;
    gyroscopeMinAngleY:     -45,     // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;
    gyroscopeMaxAngleY:     45,      // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;
}

{

reverse: false, // reverse the tilt direction

max: 35, // max tilt rotation (degrees)

startX: 0, // the starting tilt on the X axis, in degrees.

startY: 0, // the starting tilt on the Y axis, in degrees.

perspective: 1000, // Transform perspective, the lower the more extreme the tilt gets.

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.

easing: "cubic-bezier(.03,.98,.52,.99)", // Easing on enter/exit.

glare: false, // if it should have a "glare" effect

"max-glare": 1, // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)

"glare-prerender": false, // false = VanillaTilt creates the glare elements for you, otherwise

// you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself

"mouse-event-element": null, // css-selector or link to HTML-element what will be listen mouse events

// you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself

gyroscope: true, // Boolean to enable/disable device orientation detection,

gyroscopeMinAngleX: -45, // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element;

gyroscopeMaxAngleX: 45, // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;

gyroscopeMinAngleY: -45, // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;

gyroscopeMaxAngleY: 45, // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;

}

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

<body>
<div class="your-element"></div>

<script type="text/javascript" src="vanilla-tilt.js"></script>
<script type="text/javascript">
	VanillaTilt.init(document.querySelector(".your-element"), {
		max: 25,
		speed: 400
	});
	
	//It also supports NodeList
	VanillaTilt.init(document.querySelectorAll(".your-element"));
</script>
</body>