JavaScript

vanilla-tilt.jsを使って要素にパララックス（視差効果）を実装する方法

  /

ウェブデザインにおいて目を引く視差効果を簡単に実装する方法を、JavaScriptライブラリ「vanilla-tilt.js」を使って解説していきます。
このライブラリは、特にマウスの動きに反応して要素が傾くインタラクティブなエフェクトを加えることができ、ウェブサイトに斬新な動きをプラスすることが可能です。
その他のパララックス系プラグインは縦または横スクロールに合わせてパララックス（視差効果）するのが多く見られますが、vanilla-tilt.jsはマウス操作に合わせたパララックスを行います。

Contents

はじめに

パララックス効果とは、スクロールやデバイスの傾き、マウスの動きに応じて背景と前景が異なる速度で動くことで立体感を出す技術です。多くのウェブサイトで利用されていますが、今回はマウスの動きに合わせて要素が動くタイプのパララックス効果に焦点を当てます。

vanilla-tilt.jsとは？

vanilla-tilt.jsは、軽量で使いやすいJavaScriptライブラリで、要素にマウスが近づくと傾く視差効果を簡単に追加できます。他のパララックスプラグインがスクロールに反応するのに対し、このライブラリはマウスの動きに基づいています。

CSSの記述

パララックスする要素8パターン（.example .box）のCSS記述です。

<style>
html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    font-size: 22px;
    color: #333333;
}
body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
main {
    flex-grow: 2;
    border-left: 1px solid #ededed;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
section {
    padding: 5vw 10vw;
    border-bottom: 1px solid #ededed;
    text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.8em;
  padding: 15px 0;
}
.example {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-around;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.example .box {
    height: 250px;
    background-color: red;
    width: 50%;
}
.example .info {
    font-size: 18px;
    width: 50%;
}
.example:nth-child(2) .box {
    background-image: -webkit-linear-gradient(315deg, #ff008a 0%, #101c25 100%);
    background-image: linear-gradient(135deg, #ff008a 0%, #101c25 100%);
}
.example:nth-child(3) .box {
    background-image: -webkit-linear-gradient(315deg, #ff00ba 0%, #fae713 100%);
    background-image: linear-gradient(135deg, #ff00ba 0%, #fae713 100%);
    transform-style: preserve-3d;
    transform: perspective(1000px);
}
.example:nth-child(4) .box {
    background: #fc00ff; /* fallback for old browsers */
    background: -webkit-linear-gradient(135deg, #fc00ff , #00dbde); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(135deg, #fc00ff , #00dbde); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.example:nth-child(5) .box {
    background: #34e89e; /* fallback for old browsers */
    background: -webkit-linear-gradient(135deg, #34e89e, #0f3443); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(135deg, #34e89e, #0f3443); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.example:nth-child(6) .box {
    background: #4568DC; /* fallback for old browsers */
    background: -webkit-linear-gradient(135deg, #4568DC, #B06AB3); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(135deg, #4568DC, #B06AB3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.example:nth-child(7) .box {
    background: #DCE35B; /* fallback for old browsers */
    background: -webkit-linear-gradient(135deg, #DCE35B, #45B649); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(135deg, #DCE35B, #45B649); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.example:nth-child(8) .box {
    background: #00c3ff; /* fallback for old browsers */
    background: -webkit-linear-gradient(135deg, #00c3ff, #ffff1c); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(135deg, #00c3ff, #ffff1c); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.example:nth-child(9) .box {
    background: #00bf8f; /* fallback for old browsers */
    background: -webkit-linear-gradient(135deg, #00bf8f, #001510); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(135deg, #00bf8f, #001510); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
</style>

HTMLの記述

パララックスする要素8パターン（class=”box”）を用意します。各要素（class=”box”）タグに例「data-tilt data-tilt-glare data-tilt-max-glare=”0.8″」を追記することで各種パララックスを設定できます。（参考：Vanilla-tilt.js）

<main>
<h1>vanilla-tilt.jsを使って以下の各要素にパララックス（視差効果）を実装しました。<br>各要素（class="box"）にマウス操作（マウスオーバー等）を行うと8パターンのふんわり効果があります。</h1>

    <section class="example">
        <div class="box" data-tilt></div>
        <div class="info">
            <h3>最も基本的な使い方</h3>
        </div>
    </section>
    <section class="example">
        <div class="box" data-tilt>
            <div class="inner"></div>
        </div>
        <div class="info">
            <h3>視差効果の作成</h3>
        </div>
    </section>
    <section class="example">
        <div class="box" data-tilt data-tilt-glare data-tilt-max-glare="0.8"></div>
        <div class="info">
            <h3>輝き効果</h3>
        </div>
    </section>
    <section class="example">
        <div class="box" data-tilt data-tilt-reverse="true"></div>
        <div class="info">
            <h3>後ろ傾き</h3>
        </div>
    </section>
    <section class="example">
        <div class="box" data-tilt data-tilt-reset="false"></div>
        <div class="info">
            <h3>浮遊</h3>
        </div>
    </section>
    <section class="example">
        <div class="box" data-tilt data-tilt-full-page-listening></div>
        <div class="info">
            <h3>全ページ傾聴</h3>
        </div>
    </section>
    <section class="example">
        <div class="box" data-tilt data-tilt-scale="1.1"></div>
        <div class="info">
            <h3>hover時拡大</h3>
        </div>
    </section>
    <section class="example">
        <div class="box" data-tilt data-tilt-startX="-25" data-tilt-startY="-25" data-tilt-max="25"></div>
        <div class="info">
            <h3>傾斜開始位置</h3>
        </div>
    </section>
</main>

JavaScriptの記述

※vanilla-tilt.jsファイルを読み込みます。

<script type="application/javascript" src="vanilla-tilt.js"></script>

vanilla-tilt.jsを使って要素にパララックス（視差効果）を実装したデモページ

実装したデモページは以下の通りです。
vanilla-tilt.jsを使って要素にパララックス（視差効果）を実装したデモページ

ソース元：Vanilla-tilt.js

Vanilla-tilt.js

　

※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

パララックス vanilla-tilt.js
関連記事