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
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告