スクロールした時に面白いエフェクトを出すためのアイデアまとめ
スクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などをまとめました。
製品やサービスを解説するようなハウツーページや、トップページやサービスページで使いたいエフェクトのアイデア。
PR
Sponsored Link
インジケーター
進捗を示すインジケーターをヘッダー・サイド・フッター部分に固定してあるものをピップアップ。
ヘッダー
どれくらいスクロールされたのか進捗状況を線で表示するインジケーター。コンテンツの量をさり気なく知らせることができるのがよいですね。CSSのみで実装できます。
See the Pen CSS only scroll indicator by Mike (@MadeByMike) on CodePen.
サイド
スクロールに応じてページ全体を移動させ、どれくらいページが進んだのかを数値で表示します。ハウツーページで使いたい。
See the Pen Smooth scrolling + highlight links by Raphael Pora (@rpora) on CodePen.
Smooth scrolling + highlight links
フッター
フッターにナビを表示。
See the Pen Aquatilis Scroll Nav by Tim Holman (@tholman) on CodePen.
背景全体
フルページ
スクロールでページ全体にパララックスエフェクトを付与します。写真メインのプロダクトページに。
See the Pen Full Page Parallax Scroll Effect by Emily Hayman (@eehayman) on CodePen.
Full Page Parallax Scroll Effect
分割
スクロールの方向によってふすまが開閉するかのようなエフェクト。
See the Pen One page scroll with depth effect (?) by Nikolay Talanov (@suez) on CodePen.
One page scroll with depth effect
遠近感
遠近感を指定するperspectiveを使い奥行きを出して背景を動かしてます。シンプルなページに少しだけ変化を出したいときに。
See the Pen One page scroll navigation with css transforms by Nikolay Talanov (@suez) on CodePen.
カーブ
スクロールで曲線の大きさを変化させていく動き。円をさり気なく取り入れたいページに。ファーストビューかフッターで展開するとよさそうです。
See the Pen Curved Cut by Hornebom (@Hornebom) on CodePen.
背景だけをオートスクロール
むしろ背景を自動でスクロールさせます。スクロールの必要がない404ページなど情報量の少ないページで使うと面白いかもしれません。
See the Pen Infinite Scrolling Background by Josh Scarbrough (@Scarbrough9) on CodePen.
スクロールを促すアニメーション
マウススクロールを促す、シンプルで分かりやすいアニメーション。
See the Pen CSS Site Scroll Micro Animation by Ryan Mulligan (@hexagoncircle) on CodePen.
CSS Site Scroll Micro Animation
スポンサード リンク
-
投稿者：commte
株式会社コムテ代表取締役。2015/8：弊社にてWeb制作スクールを開始。 WebDesign + Web制作 (最新情報 配信)。おっとりした話し方をするおっさん。
URL：西田 鉄平
この後によく読まれている記事
Leave a Comment