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

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

準備

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

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

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

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

スクロールに応じてふわっと表示

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

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

スクロールに応じてゆっくりふわっと表示

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

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を離れる時に初期化された位置に戻る要素を有効/無効にする

いかがでしたでしょうか?
今夏リニューアル予定の自社サイトでは、こちらのスクリプトをゴリゴリ使っていい感じの演出をできればなーと考えております。
乞うご期待!


野尻

この記事を書いた人: 野尻

ビーズクリエイト Webに関する色々を担当しています。

あわせて読みたい