パララックス ScrollReveal 使用方法やオプション

以前ScrollReveal使用し簡単で使いやすかったので、もう少し掘り下げて調べてみようと思いました。
実際にcodepenで実装してみましたので、ご確認いただけます。

サイト作成期間中にじっくり比較したり調べたりするのは大変です。
JSファイルに記述していきますがが、使いこなせると都度jQueryでコードを書くより随分と楽になります。

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

scrollrevealjs — _{画像は公式のデモページを引用させていただいております。}

contents

ScrollReveal
実際の動きを CODEPEN で確認（box横並び）
実際の動きを CODEPEN で確認（box縦並び）
主なオプション
まとめ

ScrollReveal

使い方についてこれさえ押さえておけば十分だろうというものを記載しておりますが、より高度なメソッド等の詳細を知りたい方は公式ページの上部の「Guide」「API」（各オプションはこちら）をクリックしてご参照ください。
私は英語のページは辛いですが、 Chrome拡張機能のGoogle翻訳を使うとストレスが軽減されると思います。

特徴

各要素について、表示前の要素の大きさ・透明度・移動距離を指定することで、上下左右からふわっとfade inすることが可能です。
一度アニメーションの関数を作成すると、使い回しができてとても便利です。

JSファイルに記述しますが、JavaScriptは苦手の人でも易しいと思います。
オプションは多いですが、それだけカスタマイズの可能性も広がりますし、必ずしも全て設定しないと動かないというわけではありません。必要最低限のオプションを設定するだけで十分満足できるはずです。

使用方法の概要

使用するファイル

HTMLファイル
CSSファイル
JavaScriptファイル

書き方

①HTMLファイルでscrollrevealライブラリを読み込みます。

<script src="https://unpkg.com/scrollreveal"></script>

②JSファイルでScrollRevealを呼び出し、適用したい要素を指定し、必要に応じてオプションを追加していきます。

ScrollReveal().reveal('.sample'); // これだけでデフォルトの設定が適用されて動きます

ScrollReveal().reveal('.sample', { // オプション追加した場合の例
  delay: 500,
  duration: 1500,
  easing: 'ease',
  opacity: 0.1,
  scale: 0.5,
  origin: 'top',
  distance: '80px',
  viewOffset: {
    top: 80,
  },
  reset: true  
});

実際の動きを CODEPEN で確認（box横並び）

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

画面内にはまだ何も見えてない状態ですので、codepenのスクロールバーをゆっくりスクロールしてみてください。

See the Pen ScrollReveal_side by blue moon (@blue-moon) on CodePen.

HTMLファイル

<body>
  <div class="container">
    <div class="box blue"></div>
    <div class="box green"></div>
    <div class="box yellow"></div>
    <div class="box red"></div>
    <div class="box purple"></div>
  </div>
</body>

今回の実装では確認できませんが、他の例ではアニメーション後のタグ内には、下記のようにdata-sr-idとstyleが追加されていました。

<div class="sample slide" data-sr-id="10" style="visibility: visible; 
opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
transition: opacity 2.5s cubic-bezier(0.5, 0, 0, 1) 0s, transform 2.5s cubic-bezier(0.5, 0, 0, 1) 0s;">
</div>

CSSファイル

.container {
  margin: 100vh auto;
  width: 400px;
  height: 100px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: #e3e3e3;
}

.box {
  width: 50px;
  height: 50px;
}

.blue {
  background-color: #3333ff;
}

.green {
  background-color: #33ff33;
}

.yellow {
  background-color: #ffff33;
}

.red {
  background-color: #ff3333;
}

.purple {
  background-color: #9933ff;
}

JSファイル

ScrollReveal().reveal('.blue'); // これだけでデフォルトの設定が適用

ScrollReveal().reveal('.green', { // オプション追加した場合
  delay: 600,
  duration: 1600,
  easing: 'ease',
  opacity: 0.1,
  scale: 0.5,
  origin: 'top',
  distance: '80px',
  viewOffset: {
    top: 80,
  },
  reset: true  
});

ScrollReveal().reveal('.yellow', { // オプション追加した場合
  delay: 500,
  duration: 1600,
  easing: 'ease-in-out',
  opacity: 0,
  origin: 'left',
  distance: '300px',
  mobile: true,
  reset: true  
});

ScrollReveal().reveal('.red', { // オプション追加した場合
  delay: 600,
  duration: 1200,
  easing: 'ease-in-out',
  scale: 0.5,
  opacity: 0.3,
  origin: 'top',
  distance: '30px',
  mobile: true,
  reset: true,
});

var fadeIn = { // 関数を作成
  delay: 900,
  duration: 1000,
  opacity: 0.5,
  distance: '0',
  mobile: true,
  reset: true,
  rotate: {
    x: 100,
    y: 100,
  },
  useDelay: true,
};

ScrollReveal().reveal('.purple', fadeIn); //作成した関数を利用

実際の動きを CODEPEN で確認（box縦並び）

変更したのは、boxが入っているcontainerのwidthとheightを入れ替え、これに flex-direction: column; を追加し子要素のboxを横並びから縦方向に並べただけです。

See the Pen ScrollReveal_verticall by blue moon (@blue-moon) on CodePen.

デフォルトの設定（青いbox）では、boxの位置関係や大きさによるところもあると思いますが、視差効果が弱いです。
主なオプションを後述しておりますので、ご参考に適度に調整してください。
やりすぎるとかえって逆効果になってしまいますのでご注意ください。

HTMLファイル

前述のものと同じ

CSSファイル

.container {
  margin: 100vh auto;
  width: 100px;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  background-color: #e3e3e3;
}

.box {
  width: 50px;
  height: 50px;
}

.blue {
  background-color: #3333ff;
}

.green {
  background-color: #33ff33;
}

.yellow {
  background-color: #ffff33;
}

.red {
  background-color: #ff3333;
}

.purple {
  background-color: #9933ff;
}

JSファイル

前述のものと同じです。

主なオプション

使用頻度は少ないと思われる（個人的な感想です）、METHODS、CALLBACKSは省略しています。
必要に応じて詳細は公式ページでご確認下さい。

オプション名	内容	デフォルト値
delay	遅延時間単位はミリ秒	{ delay: 0 }
distance	移動距離単位は、 ‘px’, ‘em’, ‘%’	{ distance: ‘0px’ }
duration	アニメーション完了時間単位はミリ秒	{ duration: 600 }
easing	開始から終了までの遷移の制御許容値は、 ‘ease’, ‘ease-in’, ‘ease-in-out’, ‘ease-out’, ‘step-start’, ‘step-end’, ‘steps()’, ‘cubic-bezier()’ CSSのtransitionと同じ	{ easing: ‘cubic-bezier(0.5, 0, 0, 1)’ }
opacity	表示前の不透明度値の範囲は0～1	{ opacity: 0 }
origin	要素が出現元（どこから？ということ）許容値は、 ‘top’, ‘right’, ‘bottom’, ‘left’	{ origin: ‘bottom’ }
rotate	回転角度親要素にperspectiveプロパティを設定すると、3D回転を作成可	{ rotate: { x: 0, y: 0, z: 0 } }
scale	表示前のサイズ 1が等倍	{ scale: 1 }
cleanup	アニメーション完了後、再度呼び出すか	{ cleanup: false }
container	ビューポートとして使用、ウィンドウではなく親要素を基準	{ container: document.documentElement }
desktop	デスクトップでの有効/無効を設定	{ desktop: true }
mobile	モバイルでの有効/無効を設定	{ mobile: true }
reset	ビューポートに入る度に繰り返すか	{ reset: false }
useDelay	値がいつ割り当てられるかを指定許容値は、 ‘always’, ‘once’, ‘onload’	{ useDelay: ‘always’ }
viewFactor	要素の表示について、要素のどの部分がビューポート内にあるかを指定値の範囲は0～1	{ viewFactor: 0 }
viewOffset	ビューポート境界を調整値はピクセル単位で距離を指定	{ viewOffset: { top: 0, right: 0, bottom: 0, left: 0, } }

余談

revealとは、翻訳すると、「明かす、漏らす、表す」という意味で、秘密を知らせるというニュアンスも含まれているそうです。粋なネーミングですね。

まとめ

パララックスとはスクロールによる視差効果として、ユーザーに自然とスクロールを促します。実装されているとWEBサイトの格が一段上がったような感じがしませんか。

実際のところ、複数のライブラリが存在していますので、それぞれ使用方法等を掲載し比較したかったのですが、記事がとてつもなく長くなり迷子になってしまいそうなので、別のライブラリは続編として投稿したいと思います。
改めて複数のライブラリを比較検討できれば、WEBサイトに適したライブラリの選択の参考になるのではと思っています。

※後日追記
このJSライブラリと似たような効果をもたらしてくれるAOSについてアップしましたので、ご参考までに。