JavaScript

lax.jsを使ってパララックスページを作る方法

lax.jsを使ってパララックスページを作る方法をご紹介します。
今回はページを下にスクロールすると四角がくるくる回るパララックスページを作ります。

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を使ったパララックスデモページ

ソース元:lax.js

lax.js
GitHub:lax.js

 

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