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

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

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

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

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

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についてアップしましたので、ご参考までに。

タイトルとURLをコピーしました