Webデザインにスクロールエフェクトを取り入れるCSSとJSのコードスニペット8選 スクローリングでUX向上を実現

スクロールは、ユーザーに求められる最も基本的なタスクの1つです。また、最近のウェブサイトやアプリは、多くのスクロールを求めています。スクロールベースの効果を追加すると、長いコンテンツをナビゲートする機能を邪魔しない限りですが、ユーザーエクスペリエンスが向上します。

 

スクロールは閲覧を簡単にし、サイトにちょっとした雰囲気を追加することもできます。閲覧者を驚かせ邪魔しないようにしながらサイトを案内します。

 

 

Section by Section

最新のWebページは複数のコンテンツに分けられ、それぞれに独自の要素があります。このスニペットは、画面の下部にボタン（様々スタイルで利用可能）を追加し、クリックすると次のセクションに移動できるようにしました。jQueryと結合したCSS IDを使用して、ナビゲーションを機能させています。

 

See the Pen
demo:CSS scroll down button by Naoya (@nxworld)
on CodePen.

 

 

All Indications Say You’re Scrolling

スクロールインジケーターは、コンテンツが多いWebサイトで人気があります。ユーザーがどれだけ読み進めているかすぐにわかります。これはCSSのみです。

 

See the Pen
CSS only scroll indicator by Mike (@MadeByMike)
on CodePen.

 

You Can Scroll If You Want To

このスニペットは必ずしもそれ自体に効果はありませんが、目的は果たします。フルスクリーンの画像やその他の要素を利用して、ユーザーにスクロールできることを知らせることができますが曖昧な方法です。

 

このアニメーション化されたスクロールアイコンのような小さなアイテムは、ユーザーに、下にさらにコンテンツがあることを確実に知らせます。 すべての状況に適しているわけではありませんが、利用できる場合があります。

 

See the Pen
CSS Site Scroll Micro Animation by Ryan Mulligan (@hexagoncircle)
on CodePen.

 

The Incredible Shrinking Header

このようなスティッキーヘッダーは、長年にわたって定番となっています。どうしてでしょうか。ユーザーの利便性を大幅に高めることができるからです。ページの上部までスクロールすることなく、サイトの他の場所に案内することができるからです。いつも通りページを下にスクロールすると、ヘッダーはコンパクトに縮小します。

 

See the Pen
Scroll Header by Blake Bowen (@osublake)
on CodePen.

 

Slide to the Right

スティッキーヘッダーの別の例です。今回は、1ページ用に微調整しました。上部のナビゲーションは、現在のコンテンツセクションが表示され、ユーザーはすばやくそれを切り替えることができます。

 

See the Pen
Sticky Slider Navigation (Responsive) by Ettrics (@ettrics)
on CodePen.

 

Flying Colors

1ページサイトや長いページに最適な別のスニペットを見てみましょう。CSSとjQueryを使用して、下にスクロールするときに背景の色を変更します。

 

See the Pen
Changing background-color while scrolling version 2 by JP Nothard (@Funsella)
on CodePen.

 

Turning Vertical into Horizontal

Webサイトを垂直方向ではなく水平方向にスクロールさせたいと思ったことはありませんか。もちろんできます。しかし、水平スクロールバーが必要ない場合はどうしましょう。その場合、このようなものがあります。jInvertScrollと呼ばれるスクリプトを使用することで、サイトが視差効果を備えたサイドスクロールに変わります。

 

See the Pen
Side Scrolling from jInvertScroll by SitePoint (@SitePoint)
on CodePen.

 

Animate on Scroll

最近の大きなトレンドの1つは、視界に入ってくるコンテンツをアニメーション化することです。上手に利用すると注目を集めることができます。しかし、行き過ぎるとサーカスのようになります。あなたが思い切ることにした場合はこのスニペットを検討してください。AOS（スクロール上のアニメーション）ライブラリを搭載しています。

 

See the Pen
AOS – animations by Snik (@michalsnik)
on CodePen.

 

Scroll On, Web User

当時の一般的な考えはスクロールを避けることでした。現在、ソーシャルメディアとスマートフォンは、親指（およびカーソル）で長い範囲をカバーできるように変化しています。ですから、楽しくて便利なものを使用することもできます。

 

それが上記のスニペットの目的です。さまざまなケースをカバーしながら邪魔にならないようにします。他のアイデアをお探しですか。