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

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

Contents

lax.jsを使ったパララックスページのCSS記述
lax.jsを使ったパララックスページのHTML記述
lax.jsを使ったパララックスページの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>