CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10

  • Posted on
  • Category : Tips
CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10

自分用に一覧化したのでシェアします。ファーストビューで大きめのイメージやムービーなどを配置しているサイトで設置されていることが多い、次のコンテンツがあることを示したりスクロールするよう促すアイコンやボタンをCSSで表現してみたサンプル全10種類です。クリックした際に次のコンテンツへスクロールされる動きなどはJavaScriptを使用していますが、矢印の見栄えやアニメーションなどに関してはCSSのみで実装してあります。

※閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。

共通のHTML・CSS

以下で紹介している内容は一部異なるものもありますが、基本的に下記のようなHTMLを使用しています。

HTML

<a href="#"><span></span>Scroll</a>

CSSはa要素への共通スタイルとして下記を記述していますが、こちらはほとんどが位置調整のために記述している内容なので親要素等で既に位置を決めていたりする場合などは必要なく、その場合はdisplay: inline-block;やposition: relative;などの記述のみで実装できると思います。

CSS

a {
	position: absolute;
	bottom: 20px;
	left: 50%;
	z-index: 2;
	display: inline-block;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
	text-decoration: none;
}

また、ここでは動きの紹介にアニメーションGIFを使用しているので、実際の動きや表示は以下デモページで確認できます。
デモはCodePenを使用しているためかスマートフォンで見るとちゃんと動きが確認できないので、確認の際はPCで閲覧してください。（動き自体はスマートフォンでも問題ないと思います）

DEMO

CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10 目次

  1. 矢印
  2. 矢印 × サークル
  3. 矢印 × サークル × 波紋
  4. 矢印 × アニメーション #1
  5. 矢印 × アニメーション #2
  6. 矢印 × アニメーション #3
  7. 矢印 × アニメーション #4
  8. マウス
  9. マウス × 矢印
  10. マウス × アニメーション

1. 矢印

矢印

シンプルな矢印のみのパターンで、よく見かけることもあるborderを指定した要素をtransform: rotate(-45deg);で回転させたものになり、CSSを下記のように記述します。

CSS

a {
	padding-top: 60px;
}
a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	box-sizing: border-box;
}

目次へ

2. 矢印 × サークル

矢印 × サークル

こちらは先ほどの矢印にサークルを追加したもので、CSSを下記のように記述します。

CSS

a {
	padding-top: 60px;
}
a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 46px;
	height: 46px;
	margin-left: -23px;
	border: 1px solid #fff;
	border-radius: 100%;
	box-sizing: border-box;
}
a span::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: '';
	width: 16px;
	height: 16px;
	margin: -12px 0 0 -8px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	box-sizing: border-box;
}

目次へ

3. 矢印 × サークル × 波紋

矢印 × サークル × 波紋

先ほどの「矢印×サークル」に少し動きをつけたもので、波紋が広がるエフェクトをつけたものです。
実装にはCSSを下記のように記述します。

CSS

a {
	padding-top: 60px;
}
a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 46px;
	height: 46px;
	margin-left: -23px;
	border: 1px solid #fff;
	border-radius: 100%;
	box-sizing: border-box;
}
a span::after {
	position: absolute;
	top: 50%;
	left: 50%;
	content: '';
	width: 16px;
	height: 16px;
	margin: -12px 0 0 -8px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	box-sizing: border-box;
}
a span::before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	content: '';
	width: 44px;
	height: 44px;
	box-shadow: 0 0 0 0 rgba(255,255,255,.1);
	border-radius: 100%;
	opacity: 0;
	-webkit-animation: sdb 3s infinite;
	animation: sdb 3s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	60% {
		box-shadow: 0 0 0 60px rgba(255,255,255,.1);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	60% {
		box-shadow: 0 0 0 60px rgba(255,255,255,.1);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

目次へ

4. 矢印 × アニメーション #1

矢印 × アニメーション #1

矢印に一定間隔で位置が下に少しずれるアニメーションを加えたもので、CSSを下記のように記述します。

CSS

a {
	padding-top: 60px;
}
a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb {
	0% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
	}
	20% {
		-webkit-transform: rotate(-45deg) translate(-10px, 10px);
	}
	40% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
	}
}
@keyframes sdb {
	0% {
		transform: rotate(-45deg) translate(0, 0);
	}
	20% {
		transform: rotate(-45deg) translate(-10px, 10px);
	}
	40% {
		transform: rotate(-45deg) translate(0, 0);
	}
}

目次へ

5. 矢印 × アニメーション #2

矢印 × アニメーション #2

こちらは上から下へ矢印が移動しながらスーッと消えていくもので、CSSを下記のように記述します。

CSS

a {
	padding-top: 70px;
}
a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 1.5s infinite;
	animation: sdb 1.5s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb {
	0% {
		-webkit-transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: rotate(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotate(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}

目次へ

6. 矢印 × アニメーション #3

矢印 × アニメーション #3

こちらも先ほどと同様に矢印が上から下へ移動しながら消えていくものになりますが、さらにクルクルと回転する動きを付けたものです。
実装にはCSSを下記のように記述します。

CSS

a {
	padding-top: 70px;
}
a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotateZ(-45deg);
	transform: rotateZ(-45deg);
	-webkit-animation: sdb 1.5s infinite;
	animation: sdb 1.5s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb {
	0% {
		-webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		-webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
		opacity: 0;
	}
}

目次へ

7. 矢印 × アニメーション #4

矢印 × アニメーション #4

こちらは複数の矢印を使用したパターンのもので、やっていることはただそれぞれで位置をずらして配置した矢印を表示・非表示しているだけなのですが、animation-delayで時間をずらすことでこのような見栄えになります。
この実装に関してのHTMLはこれまでのものと少し違い、HTMLとCSSそれぞれを下記のように記述します。

HTML

<a href="#"><span></span><span></span><span></span>Scroll</a>

CSS

a {
	padding-top: 80px;
}
a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 24px;
	height: 24px;
	margin-left: -12px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	opacity: 0;
	box-sizing: border-box;
}
a span:nth-of-type(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}
a span:nth-of-type(2) {
	top: 16px;
	-webkit-animation-delay: .15s;
	animation-delay: .15s;
}
a span:nth-of-type(3) {
	top: 32px;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
}
@-webkit-keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

目次へ

8. マウス

マウス

矢印以外のものだとスクロールダウンボタンとして配置されているのを次に見かけることが多いマウスを実装してみたもので、CSSを下記のように記述します。

CSS

a {
	padding-top: 60px;
}
a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 30px;
	height: 50px;
	margin-left: -15px;
	border: 2px solid #fff;
	border-radius: 50px;
	box-sizing: border-box;
}
a span::before {
	position: absolute;
	top: 10px;
	left: 50%;
	content: '';
	width: 6px;
	height: 6px;
	margin-left: -3px;
	background-color: #fff;
	border-radius: 100%;
	box-sizing: border-box;
}

目次へ

9. マウス × 矢印

マウス × 矢印

こちらは先ほどのマウスの下に矢印を追加したもので、実装にはCSSを下記のように記述します。

CSS

a {
	padding-top: 80px;
}
a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 30px;
	height: 50px;
	margin-left: -15px;
	border: 2px solid #fff;
	border-radius: 50px;
	box-sizing: border-box;
}
a span::before {
	position: absolute;
	top: 10px;
	left: 50%;
	content: '';
	width: 6px;
	height: 6px;
	margin-left: -3px;
	background-color: #fff;
	border-radius: 100%;
	box-sizing: border-box;
}
a span::after {
	position: absolute;
	bottom: -18px;
	left: 50%;
	width: 18px;
	height: 18px;
	content: '';
	margin-left: -9px;
	border-left: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	box-sizing: border-box;
}

目次へ

10. マウス × アニメーション

マウス × アニメーション

こちらはマウスにスクロールを促すようなアニメーションを加えてみたもので、実装にはCSSを下記のように記述します。

CSS

a {
	padding-top: 60px;
}
a span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 30px;
	height: 50px;
	margin-left: -15px;
	border: 2px solid #fff;
	border-radius: 50px;
	box-sizing: border-box;
}
a span::before {
	position: absolute;
	top: 10px;
	left: 50%;
	content: '';
	width: 6px;
	height: 6px;
	margin-left: -3px;
	background-color: #fff;
	border-radius: 100%;
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	box-sizing: border-box;
}
@-webkit-keyframes sdb {
	0% {
		-webkit-transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		-webkit-transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	40% {
		opacity: 1;
	}
	80% {
		transform: translate(0, 20px);
		opacity: 0;
	}
	100% {
		opacity: 0;
	}
}

目次へ

以上、CSSで実装したスクロールダウンボタンのサンプルでした。
矢印やマウスなど普通に画像やSVG使えばっていう感じも正直ありますが、アニメーションも含めてこのようにひと通りCSSだけでもそれっぽく実装できるので、すぐに実装したい時にブラウザさえ問題なければ手軽に使えるかなと思います。

Back to Top

CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10

CSSで実装する次のコンテンツへと促すスクロールダウンボタン 10

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。