【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>

ここで記述した項目以外にも、豊富なオプションが用意されていますので、ご自身のお好みに調整しましょう。

終わりに

導入のハードルは非常に低いですね。公式サイトにある通りオプションも充実していますので、ちょっと面白いホバーエフェクトを試してみたいなぁ、という場合にオススメのライブラリです。

RECENT ENTRIES

  • 【Xd】Adobe Xdで作成したデータをIllustratorに書き出す方法と書き出し後の注意点【初心者向け】

    VIEW MORE
  • 【Javascript】GSAPで高度なアニメーションをお手軽に実装しよう

    VIEW MORE
  • 【Javascript】GSAPを使ってアニメーション実装をもっと自由に!

    VIEW MORE

CONTACT

contact