【スクロールに応じた表現】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を離れる時に初期化された位置に戻る要素を有効/無効にする

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


  • Related Posts

    不景気に負けるな!停滞は次のステージで成長するための準備期間!
    • 6月 30, 2025

    唐沢農機サービス・ビーズクリエイトのNakanoです。長野県の、そして日本の未来をその両肩で支えておられる経営者の皆様、いつもお疲れ様でございます。このブログを読んでくださっている今も、会社の未来、従業員の…

    続きを読む
    初心者向け!Googleビジネスプロフィール登録サポート
    • 6月 27, 2025

    「お店の名前で検索しても、マップに出てこない」 「Googleマップにお店の表示がされていない?」 もしかしたら、それは「Googleビジネスプロフィール」の登録をしていないからかもしれません。 Googl…

    続きを読む