【スクロールに応じた表現】2分でお手軽に？ScrollRevealで簡単にスクロールに応じたエフェクトを実装

by 野尻 · 2020年7月10日

こんにちは。デザイナーの野尻です。
今回は、今どきのウェブサイトを作るのに欠かせない「スクロールに応じた動き」を簡単に実現するScrollRevealを動かしてみたいと思います。

準備

ライブラリをscriptタグで読み込み

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

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

これだけ！
あとは対象の要素にクラスを与えてJavaScriptからアニメーションを指定する感じになります。

注意
ライブラリを読み込ますタイミングが非常に重要です！
動かしたい要素より、ライブラリが先に読み込まれないと、全然動いてくれません（これにめちゃくちゃハマりました）
headに設置してもピクリともしない方は、</body>直前などにライブラリを設置すると幸せになれるかも

それでは動かしてみます！

fadeというクラスを付与した画像に対してアニメーション指定します

<script>
       ScrollReveal().reveal('.fade');
</script>

ScrollReveal().reveal('.fade');

</script>

どうでしたでしょうか？
一瞬過ぎてわからないので、ちょっとゆっくり動かしてみます。

fade2というクラスを付与した画像に対してアニメーション指定します

<script>
       ScrollReveal().reveal('.fade2', {duration: 3000});
</script>

ScrollReveal().reveal('.fade2', {duration: 3000});

</script>

durationというオプションを指定して、アニメーションが実行されるまでの時間を長くし、ゆっくり表示しています。

こんな感じの要領で、色々なオプション指定をすることが可能です。

オプション	値	説明
delay	ミリ秒単位の時間	アニメーションが実行されるまでの時間
distance	px/em/%	表示された時に要素が移動する距離
duration	ミリ秒単位の時間	アニメーションの完了にかかる時間
duration	CSS timing function（ease,ease-inなど）	アニメーションがどのように遷移するか
delay	ミリ秒単位の時間	アニメーションが実行されるまでの時間
interval	ミリ秒単位の時間	各公開間の時間
opacity	0~1	表示される前の不透明度
origin	top/right/bottom/left	要素がどの方向から来るか
scale	数字	表示される前の要素のサイズ
desktop	true/false	デスクトップブラウザでアニメーションを有効/無効にする
mobile	true/false	モバイルブラウザでアニメーションを有効/無効にする
reset	true/false	viewportを離れる時に初期化された位置に戻る要素を有効/無効にする