今回は、cssのみで実装できるスクロールを促すアニメーションをまとめた記事になっています。
よくメインビジュアル下部についている、スクロールバー / スクロールボタンを見たことはありますか？
メインビジョンの下にコンテンツがあることをユーザーにわかりやすく伝える定番のUIですよね。
とはいえ、実装する機会は1サイトに基本一回だと思います。
やる度に作り方を調べている諸兄も多いはず。
そこで今回はcodepenからのまとめではありますが、実装しやすいものから思わず記憶に残る個性的なスクロールバー / スクロールボタンまで20個まとめました。
是非web制作の参考にされてくださいね。
それでは下記からどうぞ。
【CSS】スクロールを促す華麗なアニメーション20選
シンプルなようで凝った矢印アニメーション
矢印の大きさがふわっと変わるのが地味に個性を演出しますね。
See the Pen Scroll down icon animation by Thomas Nägele (@xonic) on CodePen.
定番のマウスアイコンのスクロールアニメーション
マウスを下へスクロールしてください、というのをcssのアニメーションで表します。
基本にして多くのwebサイトで使われるアニメーションでもあります。
See the Pen Pure CSS Animated Mouse Scroll Icon by Deepak K Vijayan (@2xsamurai) on CodePen.
どこかデジタルチックなスクロールアニメーション
意外と使われているところを見ないですが、多くのシーンで応用できる、どこかデジタル味を感じさせるアニメーションです。
See the Pen svg scroll down arrow by junjun (@postor) on CodePen.
スクロールバーと矢印の組み合わせ
独特なキレのあるアニメーションですが、cssで簡単に実装できます。
ちょっとキレ良すぎるかも、、笑
See the Pen Scroll down – Call to action animation by Pavel der Schleifer (@pavelderschleifer) on CodePen.
波紋のように広がるボタンアニメーション
無限に波紋が広がるようなアニメーションです。
こちらも汎用性が高そうですね。
See the Pen Scroll Down Arrow by _j_ (@Hoebink) on CodePen.
ちょっとポップな動き
矢印のどこかコミカルな動きは、遊びゴゴロを感じますね。
サイトのトーンを選びそうではありますが、、
See the Pen Slide-out Scrolling Gallery by Teegan Lincoln (@teeganlincoln) on CodePen.
スクロールを促すアニメーション 詰め合わせ
どのアニメーションも基礎的な動きですが、可愛らしいですよね。
個人的には一番右がユニークで好きです。
See the Pen Scroll Down Icon Animation by Tsukasa Aoki (@TKS31) on CodePen.
スタイリッシュなスクロールバー
多分、昨今のwebサイトで一番見かける動きかもしれません。
スタイリッシュでかつ、主張しすぎない絶妙な塩加減のアニメーションは多くのwebサイトに溶け込みます。
See the Pen scroll down line animation by RyotaHirano (@ryotahirano) on CodePen.
スクロールを促すアニメーション 詰め合わせ②
一つ一つをよく見てみると結構動きが凝っていることがわかります。
アニメーションのイージングがふわっとしていて、柔らかいトーンのサイトに合いそうですね。
See the Pen CSS3 Scroll Down Animation by AB Belal (@ab_belal) on CodePen.
スクロールを促すアニメーション 詰め合わせ③
数多くのマウスの動きが実装されています。
繊細なアニメーションは潜在的なUXを高めるのに役立ちます。
See the Pen Scroll down indicators by Jenning (@jenning) on CodePen.
個性的な回転アニメーション
海外の攻めたwebサイトでたまに見るアニメーションです。
スタイリッシュさと、柔らかさが共存している印象で、個人的な好きな動きですね。
See the Pen Scroll Down BTNs by Ema (@emared) on CodePen.
ネオンの激情に身を任せよう
凄まじい個性を放っています。
もはやスクロールボタンの域を超えていますね。
このアニメーションは他で活かせそう、、
See the Pen Shitscroller by Mustafa Enes (@pavlovsk) on CodePen.
回転アニメーション＋α
点線が回転するアニメーションに加え、テキストとスクロールバーも動いています。
合わせ技で可愛い印象ですね。
See the Pen tao tp click animation by vijender (@VIRU) on CodePen.
スクロールバー詰め合わせ
シンプルなスクロールバーですが、様々なイージングのパターンがまとまっています。
スクロールしてみてくださいね。
See the Pen Demo: CSS scroll down line by Naoya (@nxworld) on CodePen.
コミカルな動きが目を引く
動きがとってもユニークですね。
ちょっとボヨンってなるのが個人的に好きです。
See the Pen Scroll Down Button Pure HTML/CSS by Brizman (@brizman) on CodePen.
波紋が広がるアニメーション②
さっきのものより、よりゆったりした印象のアニメーションです。
スクロールボタン以外にも応用できそうですね。
See the Pen Pulsing CSS Scroll Button by Terence Flowers (@tlflow) on CodePen.
柔らかくて個性的なスクロールアニメーション
今まで紹介したものの中では実装難易度が高めです。
js使ってますが似たものならcssでも実装できそうです。
ちなみに使用しているjsは複雑なアニメーションでも簡単に実装できるtweenmaxです。
See the Pen Parallax animation on scroll with GSAP tweenmax and ScrollMagic by Romain Jusserand (@xtiggerk) on CodePen.
小粒でもピリリと辛いアニメーション
よくあるスクロールアニメーションと見せかけて、マウスが回転します。
回転するときのイージングがシャキッとしてていいですね。
See the Pen Scroll Down SVG Icon Animation by Alessandro Benassi (@solidpixel) on CodePen.
ブルブルする、、誰か触って！
ブルブル震えているボタンです。
絶妙な震え具合はついつい触りたくなります。
See the Pen Wiggle scroll down button by Joel Rodelo (@joelrodelo) on CodePen.
ストロークアニメーションが魅力的
線をなぞるようなアニメーション、jsでしかできない印象が強いですが実はcssだけでできます。stroke-dasharrayというcssプロパティを使って実現します。
See the Pen Scroll down button animation by Kostadin (@terziev) on CodePen.
まとめ
いかがでしたか？
今回は、cssのみで実装できるスクロールを促すアニメーションをまとめてみました。
こういった細かいアニメーションは、無意識のうちにユーザーにハイクオリティなwebサイトと思わせる効果があります。
是非普段のweb制作に取り入れてみてくださね！
それでは本日はここら辺で。
webデザインの勉強で悩んでいませんか？
photoshopを始めとしたwebデザインの勉強、詰まっていませんか？
もし独学で苦戦しているなら、webデザインスクールで体系的に学習した方が挫折しなくて済むかもしれません。
筆者もwebデザインスクールに通ってwebデザイナーになり、今は割と稼げるようになったので、当時のスクールにはとても感謝しています。
今は割とキャンペーンをやっているwebデザインスクールも多いので、あなたに合うスクールが見つかるかもしれません。
興味がある方は以下からどうぞ。
＞＞ガチでおすすめのwebデザインスクールランキング【厳選10校】
doneこの記事を見ているあなたにオススメの本
