ホームページ設計・制作
【スクロールに応じた表現】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を離れる時に初期化された位置に戻る要素を有効/無効にする |
いかがでしたでしょうか？
今夏リニューアル予定の自社サイトでは、こちらのスクリプトをゴリゴリ使っていい感じの演出をできればなーと考えております。
乞うご期待！
