JavaScript PR

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

  /
記事内に商品プロモーションを含む場合があります

vanilla-tilt.jsを使って要素にパララックス（視差効果）を実装する方法をご紹介します。
その他のパララックス系プラグインは縦または横スクロールに合わせてパララックス（視差効果）するのが多く見られますが、vanilla-tilt.jsはマウス操作に合わせたパララックスを行います。

Contents

vanilla-tilt.jsを使って要素にパララックスを実装する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>

vanilla-tilt.jsを使って要素にパララックスを実装する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>

vanilla-tilt.jsを使って要素にパララックスを実装する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
RELATED POST