JavaScript PR

lax.jsを活用してプロレベルのパララックス効果を実装する手順

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

パララックス効果をウェブデザインに取り入れることは、訪問者にとって魅力的なインタラクティブ体験を作り出し、ウェブサイトに深みを与える素晴らしい方法です。JavaScriptライブラリの一つであるlax.jsを用いて、簡単に美しいパララックスページを作成する手順をご紹介します。このライブラリを使用すると、スクロールに応じて動きが変わる、生き生きとしたページを実現できます。

Contents

lax.jsとは？

lax.jsは、開発者Alex Foxによって作られた、軽量でパワフルなJavaScriptライブラリです。スクロールやマウスの動き、さらにはジャイロスコープセンサーに応じたアニメーションをページに組み込むことができ、リッチなビジュアルエクスペリエンスを提供します。GitHubで無料で利用でき、カスタムアニメーションの作成も可能です。

パララックス効果を実装する前の準備

パララックス効果を実装する前に、いくつかの前提条件を整える必要があります。まず、ウェブページにlax.jsを組み込むために、lax.jsファイルをダウンロードし、ウェブサイトの対応するディレクトリに配置します。次に、HTML、CSS、JavaScriptを用いて、パララックス効果を適用したい要素をマークアップします。

CSSでの準備

パララックスページを作るためには、基本的なCSSスタイルを定義することが不可欠です。今回の例では、スクロールに応じて回転する四角形（.square）のスタイリングを行います。四角形の大きさ、色、初期位置を指定し、固定位置に配置します。このスタイルが、パララックス効果の基盤となります。

<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>

HTMLでの構造

続いて、HTMLでパララックス効果を適用したい要素をマークアップします。divタグを使ってclass=”square”というクラスを持つ四角形を作り、さらにlax.jsによるパララックス効果を適用するためのクラスを追加します。

下にスクロールするとくるくる回る四角（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.jsライブラリを利用するためには、まず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の詳細や、さらなるカスタマイズ方法を学びたい場合には、lax.jsの公式サイトやGitHubリポジトリを参照すると良いでしょう。これらのリソースから、ドキュメントやコードサンプル、ライブラリの最新の更新を入手することができます

lax.js
GitHub：lax.js

まとめ

この記事では、lax.jsを使ったパララックスページの作成方法をご紹介しました。初心者から中級者まで、幅広い開発者がこのライブラリを使ってクリエイティブなページを簡単に作成できるようになるでしょう。インタラクティブなウェブページはユーザーエンゲージメントを高め、長期的にはウェブサイトのトラフィック増加にも寄与します。ぜひlax.jsを使って、あなたのウェブサイトに動きを加えてみてください。

　

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

パララックス lax.js
RELATED POST