【Jsライブラリ】vanilla-tilt.jsで目を引くホバー演出を実装しよう
どうも、NNCの石上です。
今回は、「vanilla-tilt.js」というライブラリの紹介になります。ホバーした際に立体的なアニメーションエフェクトを実装することができます。
イメージとしては以下のような感じです。
ライブラリの使い方
公式サイトから「vanilla-tilt.min.js」をダウンロードして読み込みます。
<!-- bodyの終了タグ直前に読み込み -->
<script src="assets/js/libs/vanilla-tilt.min.js"></script>あとはアニメーションを付与したい要素に対して、「data-tilt」属性を付与しておくだけで準備完了です。光の反射や拡大などのオプションを追加したい場合は、それぞれ専用の属性を追記することで対応できます。
<div class="item" data-tilt>
<p>Vanilla-tilt.js</p>
</div>
<div class="item" data-tilt data-tilt-glare data-tilt-max-glare="0.8">
<p>vanilla-tilt.js</p>
</div>
<div class="item" data-tilt data-tilt-scale="1.1">
<p>vanilla-tilt.js</p>
</div>ただ、このやり方ですとHTMLの可読性が損なわれてしまいます。「HTMLを汚したくない！」という方は、data属性ではなくクラスを用いる方法をオススメします。
エフェクトを実装したい要素に対して、例えば「js-tilt」というクラスを付与しておくとしましょう。そのクラスに対して、後でアニメーションのオプションを定義することができます。ライブラリを読み込んだ直後にscript等で記述しておくのが分かりやすいかと思います。（もちろん別ファイルで読み込んでも可）
<!-- 要素に任意のクラスを付与しておく -->
<div class="item js-tilt">
<p>Vanilla-tilt.js</p>
</div>
<!-- bodyの終了タグ直前に読み込み・アニメーションの設定 -->
<script src="assets/js/libs/vanilla-tilt.min.js"></script>
<script>
$(function(){
VanillaTilt.init(document.querySelectorAll(".js-tilt"), {
speed: 1000,
max: 50,
perspective: 500, // 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: 250, // 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.
});
})
</script>ここで記述した項目以外にも、豊富なオプションが用意されていますので、ご自身のお好みに調整しましょう。
終わりに
導入のハードルは非常に低いですね。公式サイトにある通りオプションも充実していますので、ちょっと面白いホバーエフェクトを試してみたいなぁ、という場合にオススメのライブラリです。
こちらの記事はいかがでしたか？
+1
+1
+1
+1
1
