軽量で簡単にパララックス実装するJavaScriptライブラリ Rellax.js
軽量で簡単にパララックス実装するJavaScriptライブラリ Rellax.js

軽量で簡単にパララックス実装するJavaScriptライブラリ Rellax.js

今回は、非依存型のパララックス(視差効果)実装ライブラリの Rellax.js の紹介です。

Webサイトにおけるパララックスは、スクロールなどをした時、複数の要素を違うスピードで動かすし、立体感や遠近感などを表現する、視覚的エフェクトの事を言います。

パララックスのデモ

このページにも、Rellax.js を適応しています。画面上部の画像が他の部分のスクロールスピードに比べて少し遅くなるように実装しています。

パララックスアニメ

Rellax.js の実装

Rellax.js のサイトに行きライブラリをダウンロードしてきます。

RELLAX.JS

GITHUBをクリックすると下のようなページへ移動するので、”Clone or download”よりライブラリをダウンロードしてください。

RELLAXダウンロード

ダウンロードすると、いろいろなファイルがありますが、使用するのは、rellax.min.js のみです。
</body>タグの前辺りに、rellax.min.js を読み込んでください。※rellax.min.js ファイルまでのパスは環境によって変更してください。

<script src="http://www.yourdomain.com/js/rellax.min.js"></script>

WordPressの場合は、以下のような形で読み込むかと思います。
(※rellax.min.js ファイルをテンプレートフォルダ下のjsフォルダに設置した場合)

// WordPressの場合
<script src="<?php echo esc_url( get_template_directory_uri() )?>/js/rellax.min.js"></script>

次に、rellax.js を呼び出す任意のclassを指定します。今回はrellaxというclassを指定した要素をパララックスさせます。rellax.min.jsを読み込んだ後ぐらいに入れると動作します。

<script>
	var rellax = new Rellax('.rellax');
</script>

HTMLのマークアップ例は以下の様になります。classでrellaxを指定するだけです。簡単ですね。

<div class="rellax">
  ここにパララックスさせたい要素を入れる
</div>

パララックスのスピードを変えたい時のオプションもあります。
data-rellax-speedを加えて任意のスピードに設定できます。(-10〜+ 10)

<div class="rellax" data-rellax-speed="-6">
  ここにパララックスさせたい要素を入れる
</div>

このライブラリを使えば、特に難しい設定をしなくても簡単にパララックスを実装できます。皆様もぜひお試しください。


タグ :