【jQuery】シンプルなパララックス効果を実装できる［parlx.js］の使い方

今日ご紹介する［parlx.js］はパララックス効果を手軽に導入できるjQueryプラグインです。

サンプルは以下に用意してあります。

DEMO : https://on-ze.com/demo/jquery-parlx.js/

データファイルは以下のリンク先から入手できます。

GitHub : https://github.com/JB1905/parlx.js

使い方は以下の手順でどうぞ。

［parlx.js］本体ファイルを設置

ダウンロードした「parlx.js」をHTMLの適当な場所で読み込みます。
このとき、先にjQuery本体ファイルを先に読み込むことも忘れずに。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="parlx.js"></script>

パララックス効果を追加する要素を作る。

続いてはエフェクトを効かせる要素を作ります。

HTML

HTMLは以下のとおり。

<section class="parallax">
<div class="background" style="background-image: url(sample.png);"></div>
</section>

CSS

スタイルシートは次のように記述します。
あくまでもサンプルなので細かい数値は各自で調整してくださいね。

.parallax {
	position:relative;
	height:400px;
	overflow:hidden;
}
.background {
	position:absolute;
	background-repeat:no-repeat;
	background-size:cover;
}

ここでのポイントは、親要素となる「.parallax」に必ずposition:relative;とoverflow:hidden;を指定しておくこと、また視差効果を効かせる子要素にも最低限、上記３つのプロパティposition:absolute;、background-repeat:no-repeat;、background-size:cover;を指定しておくことです。

JavaScript

最後に［parlx.js］を動かす初期設定を行います。
親要素が「.parallax」で子要素が「.background」になるので、具体的には次のように記述します。

<script>
$('.parallax').Parlx({
	 item: '.background'
});
</script>

ここまでで実装完了です。

DEMO : https://on-ze.com/demo/jquery-parlx.js/

オプション設定

用意されているオプションは3つ。「speed」「height」「mobile」を指定可能です。

speed … 初期値は「0.3」
height … 初期値は「400px」
mobile … 初期値は「true」

それぞれ、独自データ属性でHTMLに追記するか、jQueryを使うか、どちらかの方法で指定可能。

独自データ属性で指定する場合

<section class="parallax" data-speed="0.6">
<div class="background" style="background-image: url(sample.png);"></div>
</section>

jQueryで指定する場合

<script>
$('.parallax').Parlx({
	item: '.background',
	speed: '0.6'
});</script>

個人的には独自データ属性を使って指定するほうがオススメですが、お好みで選択できるのが嬉しいですね。

視差効果を追加したい要素をJavaScript側で指定するだけで、パララックスエフェクト特有の複雑な計算はすべてプラグイン側で処理してくれるので非常に便利です。
比較的簡単に実装できますので、ぜひお試しください。