パララックス Simple Parallax Scrolling 使用方法

先日、パララックス効果をもたらしてくれるJSライブラリ、ScrollRevealの使用方法やオプションについて記事にしました。

今回はまた違ったJSライブラリである、Simple Parallax Scrolling について使用方法やオプションについてまとめてみました。
実際にcodepenで実装してみましたので、ご確認いただけます。

パララックス効果を実現するライブラリの新たな選択肢の一つとしてご参考になれば幸いです。

contents

Simple Parallax Scrollingtとは
使用方法の概要
実際の動きを CODEPEN でデフォルトで確認
HTMLファイルのタグ内に直書き方法
JSファイルに記述方法
主なオプション
オプションを追加して CODEPEN で確認
まとめ

Simple Parallax Scrollingtとは

Simple Parallax Scrolling_2 — _{画像は公式ページを引用させていただいております。}

公式ページがデモになっています。

特徴

テキスト等の要素（ターゲット要素）の背面に画像（視差画像）を配置し、この画像のスクロールによる上昇スピードを調整することにより、次に上昇するテキスト等の要素が上に被さるように見えます。

要素を上下左右からふわりとフェードインするという使い方向きではないようです。

使用方法の概要

使い方についてこれさえ押さえておけば十分だろうというものを記載しておりますが、より詳細を知りたい方は公式ページをご参照ください。
英語のページは辛い方は、Google翻訳がお薦めです。

使用するファイル

HTMLファイル
CSSファイル
JavaScriptファイル（HTMLファイルで完結させる場合は不要）

記述方法

HTMLファイルでjQuery及びparallax.min.jsを読み込み

ダウンロードも可能なようですが、今回はCDNで読み込んでいます。
デモページを参照すると、bodyタグ直前ではなく、headタグ内で読み込んでいます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax.js/1.5.0/parallax.min.js"></script>
<script src="main.js"></script> //ご自身の環境のパスに変更してください。JSファイルを使用しない場合は不要。

視差効果の画像要素（視差画像）を指定（方法は2通り）

①HTMLファイルのタグ内で指定する方法

後述するcodepenでもご確認いただけます。

<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg"></div>
<!-- 画像の場所はご自身の環境に適宜変更 -->

②jQueryで指定する方法

こちらも、後述するcodepenでご確認いただけます。

$('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'});　// 画像の場所はご自身の環境に適宜変更

CSSファイルで視差画像に対する設定

.parallax-window {
    min-height: 400px;　// 必須
    background: transparent;
}

オプションのデフォルト値

オプションの詳細については、後述します。

// オプションのデフォルト値
Parallax.DEFAULTS = {
  src: null,
  speed: .2,
  bleed: 0,
  zIndex: -100,
  posX: 'center',
  posY: 'center',
  overScrollFix: false,
  excludeAgents: /(iPod|iPhone|iPad|Android)/,
  aspectRatio: null,
  // jquery selectors
  sliderSelector: '>.parallax-slider',
  mirrorSelector: 'body',
  // callback functions:
  afterRefresh: null,
  afterRender: null,
  afterSetup: null,
  afterDestroy: null,
};

オプション変更方法

オプションのデフォルト値を変更する場合も、視差画像を指定する場合と同様、HTMLファイルのタグ内に記述する方法と、JSファイルで変更内容を加筆する方法があります。
なお、オプション名は、HTMLファイルのタグ内ではケバブケースで、JSファイルではキャメルケースで記述します。

①HTMLファイルのタグ内に記述する方法

<div class="parallax-window" data-parallax="scroll" data-image-src="/path/to/image.jpg" data-speed="0.3" data-pos-x="left" data-parallax></div>

②JSファイルで変更する方法

// 前述のデフォルト値そのものを変更する場合
  Parallax.DEFAULTS.speed = -.2;
  Parallax.DEFAULTS.afreRefresh = (instance) => { doSomethingWith(instance); };

// 画像要素に対してオプションのデフォルト値を変更する場合
$('.parallax-window').parallax({
  speed: .3,
  posX: 'left',
  afterRender: doSomething,
});

実際の動きを CODEPEN でデフォルトで確認

念のため2つの記述方法で行ってみました。
結果は同じになるはずですが、別の所で意図しない問題が発生してしまいました。
CODEPEN でクラウド上の画像をJSファイルで読み込めなかったため、JSファイルに記述方法ではResultに画像が表示できませんでした。

HTMLファイルのタグ内に直書き方法

「Run Pen」をクリックしてください。

See the Pen simple parallax scrolling_HTML by blue moon (@blue-moon) on CodePen.

HTMLファイル

<body>
  <div class="sample-text">
    <h1>beach</h1>
  </div>
  <div class="parallax-window" data-parallax="scroll" data-image-src="yourpath"></div>
 
  <div class="sample-text">
    <h1>flower</h1>
  </div>
  <div class="parallax-window" data-parallax="scroll" data-image-src="yourpath"></div>

  <div class="sample-text">
    <h1>beach</h1>
  </div>
  <div class="parallax-window" data-parallax="scroll" data-image-src="yourpath"></div>

  <div class="sample-text">
    <h1>shells</h1>
  </div>
  <div class="parallax-window" data-parallax="scroll" data-image-src="yourpath"></div>
</body>

codepen内では画像はクラウド上のものを使用していますが（data-image-src=”” の箇所）、実装する場合はご自身の環境の画像のパスに変更して下さい。

筆者の開発環境で、生成されたHTMLファイルのbodyタグ直後には、視差画像数分、下記のタグが追加されていました。

<div class="parallax-mirror" style="visibility: hidden; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; height: 400px; width: 472.889px;">
　　<img class="parallax-slider" src="shells.jpg" style="position: absolute; height: 400px; width: 600px; max-width: none;">
</div>

一応、ダメもとでalt属性を記述を試しても、追加されたimgタグには反映されませんでした。
alt属性の個別追加方法は、最後の項目に参考として記載しましたので、ご参照ください。

CSSファイル

body {
  margin: 0;
}

/* 自動でbodyタグ直後に追加されるimgの親 */
.parallax-mirror { 
  display: flex;
  align-items: center; /* 縦中央寄せ */
  justify-content: center; /* 横中央寄せ */
}

.parallax-window {
  width: 100%;
  min-height: 400px; /* 最小サイズを指定 */
  background: transparent;
}

.sample-text {
  width: 100%;
  height: 300px; 
  background: #fefefe;
}

h1 {
  margin: 1rem auto;
  text-align: center;
  color: #808080;
}

補足説明

視差画像に最小画像を設定するのを忘れないようにしてください。

JSファイルに記述方法

残念ながら、 CODEPEN ではResultには画像が表示できませんでしたので、各ファイルの記述方法のみご参考にしてください。
ですが、筆者の開発環境では前述の記述方法と同じ結果が確認できました。

HTMLファイル

<body> 
  <div class="sample-text">
    <h1>beach</h1>
  </div>
  <div class="parallax-window-1"></div>
  
  <div class="sample-text">
    <h1>flower</h1>
  </div>
  <div class="parallax-window-2"></div>

  <div class="sample-text">
    <h1>beach</h1>
  </div>
  <div class="parallax-window-3"></div>

  <div class="sample-text">
    <h1>shells</h1>
  </div>
  <div class="parallax-window-4"></div>
</body>

HTMLファイルのタグ内に直書き方法と同様に、bodyタグ直後に下記のタグが追加されました。内容は同じものでした。

<div class="parallax-mirror" style="visibility: hidden; z-index: -100; position: fixed; top: 0px; left: 0px; overflow: hidden; height: 400px; width: 403.556px;">
  <img class="parallax-slider" src="shells.jpg" style="position: absolute; height: 400px; width: 600px; max-width: none;">
</div>

CSSファイル

body {
  margin: 0;
}

/* 自動でbodyタグ直後に追加されるimgの親要素 */
.parallax-mirror { 
  display: flex;
  align-items: center; /* 縦中央寄せ */
  justify-content: center; /* 横中央寄せ */
}

.parallax-window-1, 
.parallax-window-2, 
.parallax-window-3, 
.parallax-window-4 {
  width: 100%;
  min-height: 400px; /* 最小サイズを指定 */
  background: transparent;
}

.sample-text {
  width: 100%;
  height: 300px; 
  background: #fefefe;
}

h1 {
  margin: 1rem auto;
  text-align: center;
  color: #808080;
}

JSファイル

jQuery(function($) {
  $('.parallax-window-1').parallax({imageSrc: 'beach_01.jpg'}); //画像はご自身の環境のパスに変更してください
  $('.parallax-window-2').parallax({imageSrc: 'flower.jpg'});
  $('.parallax-window-3').parallax({imageSrc: 'beach_02.jpg'});
  $('.parallax-window-4').parallax({imageSrc: 'shells.jpg'});
});

主なオプション

HTMLファイルのタグ属性としてオプションを指定するときは、小文字でハイフンでつながれたケバブケースに変換します。例えば、「zIndex」は「data-z-index=””」とします。

オプション名	説明	タイプ	デフォルト値
mageSrc	視差効果を適用する画像へのパスを指定	path	null
naturalWidth	画像の幅を指定、画像の正しいアスペクト比を決定する際の読み込みを高速化	number	auto
naturalHeight	画像の高さを指定、画像の正しいアスペクト比を決定する際の読み込みを高速化	number	auto
position	ターゲット要素（画像に被せる要素）に対する位置関係座標を上、下、右、左、中央、又はピクセル値として指定（例：-10px 0px）。画像はこれらの値に基づいてターゲット要素の背面に配置 ※使用する画像が指定する高さと幅に一致していない場合で画像を中央寄せしたい場合は、別途CSSで調整する必要あり	xPos yPos	center center
positionX	同上	xPos	center
positionY	同上	yPos	center
speed	視差画像の移動速度 0.0は画像は所定の位置に固定 1.0は画像は通常の速度で移動	float	0.2
zIndex	固定位置要素のz-index値	number	-100
bleed	ミラーリングされた要素の上下数ピクセルを拡張特定のブラウザで低速、または途切れ途切れのスクロールイベントを非表示に可	number	0
iosFix	iOSデバイスとの互換性がないための設定 trueの場合、iOSユーザーには、視差画像を静的な中央の背景画像として設定独自のグレースフルデグラデーションを実装する場合は、無効	boolean	true
androidFix	trueの場合、Androidユーザには、視差画像を静的な中央の背景画像として設定 Androidデバイスで無効にした場合、非表示	boolean	true

因みに、GitHubではα版version2が掲載されておりますが、そちらは反映しておりません。
α版のオプションと混同しないようご注意ください。

オプションを追加して CODEPEN で確認

折角なのでオプションを変更しようと思いましたが、ほとんど変更するところもなさそうです。
とりあえず、speed、positionX、androidFixを変更してみましたので、結果をご確認ください。

See the Pen simple parallax scrolling_HTML_op by blue moon (@blue-moon) on CodePen.

HTMLファイル

<body>
  <div class="sample-text">
    <h1>beach</h1>
  </div>
  <div class="parallax-window" data-parallax="scroll" data-image-src="yourpath" data-speed="0.7" data-android-fix="true"></div>
 
  <div class="sample-text">
    <h1>flower</h1>
  </div>
  <div class="parallax-window" data-parallax="scroll" data-image-src="yourpath" data-speed="0.1" data-pos-x="bottom" data-android-fix="false"></div>

  <div class="sample-text">
    <h1>beach</h1>
  </div>
  <div class="parallax-window" data-parallax="scroll" data-image-src="yourpath" data-speed="0.3" data-pos-x="top" data-android-fix="true"></div>

  <div class="sample-text">
    <h1>shells</h1>
  </div>
  <div class="parallax-window" data-parallax="scroll" data-image-src="yourpath" data-speed="0.8" data-android-fix="false"></div>
</body>

CSSファイル

body {
  margin: 0;
}

/* 自動でbodyタグ直後に追加されるimgの親 */
.parallax-mirror { 
  display: flex;
  align-items: center; /* 縦中央寄せ */
  justify-content: center; /* 横中央寄せ */
}

.parallax-window {
  width: 100%;
  min-height: 400px; /* 最小サイズを指定 */
  background: transparent;
}

.sample-text {
  width: 100%;
  height: 300px; 
  background: #fefefe;
}

h1 {
  margin: 1rem auto;
  text-align: center;
  color: #808080;
}


Resources

補足説明

androidFixオプションについては、筆者のandroidタブレットでも確認してみました。おそらくandroidタブレットの中のcodepenでは確認できないはず（リンクで表示しているため）です。

data-android-fix=”true” とした場合、視差画像はターゲット要素の後（背面ではなく）に表示され、視差効果は得られませんでした。
data-android-fix=”false” とした場合、画像は表示されずその領域が真っ白となりました。

よって、モバイル端末でパララックス効果を実現したい場合は、他の手段を構築必要があるようです。

まとめ

個人的な感想

デフォルト値でも十分満足でき、記述方法さえ分かれば簡単に実装でき便利だと思いました。
最後まで迷ったのが次の2点、HTMLファイルタグの直書き方法とJSファイル記述方法のどちらがよいか、imgタグのalt属性はどうするか、です。

簡単に済ませたい、デフォルト値でほぼ十分で変更オプションも少なめなら、HTMLファイルタグの直書き方法

オプションを複数使用したい、HTMLファイルの視認性やオプション管理の容易さを優先なら、JSファイル記述方法

という選択がいいかと思います。

一方、imgタグ内のalt属性は、SEO的にはあった方がよいと思います。
alt属性を追加する場合はJSファイルを使用します。

【参考】alt属性追加方法

下記は最初の画像にalt属性を追加する方法の例です。

const imgAlt1 = $('.parallax-mirror:first-child img'); // これは後から追加される要素
$(window).on('load', imgAlt1, function(){ // .on()を使ってイベントバブリング
  imgAlt1.attr('alt', 'beach_01');
});

下記は失敗例です。

const imgAlt1 = $('.parallax-mirror:first-child img');
$(document).ready(function() {
  imgAlt1.attr('alt', 'beach_01');
});

動的要素（codepenの後に記載したとおり、<div class=”parallax-mirror” ～省略～></div>は後から追加されてましたね）のイベントにはonメソッドを使用してください。
詳細は、jQuery入門イベント(2)の解説をご参照ください。

【参考】他のJSライブラリのご紹介

パララックス効果をもたらしてくれるJSライブラリも豊富にありますので迷います。
なお、下記は他のJSライブラリを紹介した記事ですので、ご参考までに。

簡単にパララックスを実現！JSライブラリ ScrollReveal 使用方法・オプションの説明動作確認

以前使用し使いやすかったので、もう少し掘り下げてオプション等調べてみました。 codepenで動作確認できます。 JSファイルは必要ですが、使いこなせると都度jQueryでコードを書くより随分と楽になります！