calendarcodediamondfacebookfingerglobalgoogleplushatenahomepagetopplainpocketrssservicetwitterwordpresshome2searchfoldernext-arrowback-arrowfirst-arrowlast-arrow

スクロールした時に面白いエフェクトを出すためのアイデアまとめ

スクロールを行ったときに、どれくらいスクロールしたのか知らせるものや、スクロール感がユーザーに伝わりやすい実装方法などをまとめました。

製品やサービスを解説するようなハウツーページや、トップページやサービスページで使いたいエフェクトのアイデア。

PR
IT/WEB業界への転職なら
Sponsored Link

インジケーター

進捗を示すインジケーターをヘッダー・サイド・フッター部分に固定してあるものをピップアップ。

ヘッダー

どれくらいスクロールされたのか進捗状況を線で表示するインジケーター。コンテンツの量をさり気なく知らせることができるのがよいですね。CSSのみで実装できます。

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

CSS only scroll indicator

サイド

スクロールに応じてページ全体を移動させ、どれくらいページが進んだのかを数値で表示します。ハウツーページで使いたい。

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.

Aquatilis Scroll Nav

背景全体

フルページ

スクロールでページ全体にパララックスエフェクトを付与します。写真メインのプロダクトページに。

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.

perspective

カーブ

スクロールで曲線の大きさを変化させていく動き。円をさり気なく取り入れたいページに。ファーストビューかフッターで展開するとよさそうです。

See the Pen Curved Cut by Hornebom (@Hornebom) on CodePen.

Curved Cut

背景だけをオートスクロール

むしろ背景を自動でスクロールさせます。スクロールの必要がない404ページなど情報量の少ないページで使うと面白いかもしれません。

See the Pen Infinite Scrolling Background by Josh Scarbrough (@Scarbrough9) on CodePen.

Infinite Scrolling Background

スクロールを促すアニメーション

マウススクロールを促す、シンプルで分かりやすいアニメーション。

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:西田 鉄平
この後によく読まれている記事

Comments

Leave a Comment

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください