lax.jsを使ってパララックスページを作る方法をご紹介します。
今回はページを下にスクロールすると四角がくるくる回るパララックスページを作ります。
Contents
lax.jsを使ったパララックスページのCSS記述
※下にスクロールするとくるくる回る四角(.square)のCSS記述です。必要に応じて変更して下さい。
<style> body { padding: 0; background-color: #F4F4F4; background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); margin: 0; background-size: 700px 700px; height: 10000px; } .square { height: 200px; width: 200px; background-color: #8ED2DD; margin-bottom: 0px; margin-left: -100px; margin-top: -100px; left: 50vw; top: 50vh; position: fixed; } h1{ text-align: center; font-size: 20px; line-height: 1.8em; padding: 15px 0; } </style>
lax.jsを使ったパララックスページのHTML記述
※下にスクロールするとくるくる回る四角(class=”square”)を用意します。用意した四角(class=”square”)のclassにスクロールした時のパララックス効果(lax lax_preset_spin:400:360 lax_preset_flipX)を追記します。(参考:GitHub:lax.js)
<h1>lax.jsを使ったパララックスページ<br>下にスクロールしてみてください。</h1> <div class="square lax lax_preset_spin:400:360 lax_preset_flipX"></div>
lax.jsを使ったパララックスページのJavaScriptの記述
※lax.min.jsファイルを読み込みます。lax.addDriver(‘スクロール方向’, function () {return window.scrollY})を記述します。
<script type="application/javascript" src="lax.min.js"></script> <script type="application/javascript"> window.onload = function () { lax.init(); lax.addDriver('scrollY', function () { return window.scrollY }) } </script>
lax.jsを使ったパララックスデモページ
ソース元:lax.js
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告