NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

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

2015年11月18日CSSテクニック

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

ファーストビュー全体に広がる全画面ヘッダーなどを最初に表示する場合、下にまだコンテンツがある注意を促すことが出来る、シンプルなループアニメーションです。

デモページ

HTML

<span id="mouse"></span>

CSS

#mouse,
#mouse:before {
	position: absolute;
	left: 50%;
}
#mouse {
	top: 50%;
	width: 40px;
	height: 65px;
	margin-left: -20px;
	margin-top: -33px;
	box-sizing: border-box;
	border: 1px solid #52d3ff;
	border-radius: 25px;
}
#mouse:before {
	content: '';
	top: 8px;
	width: 8px;
	height: 8px;
	background: #52d3ff;
	margin-left: -4px;
	border-radius: 4px;
	animation: scroll 1.5s infinite;
	-webkit-animation: scroll 1.5s infinite;
	-moz-animation: scroll 1.5s infinite;
}
@keyframes scroll {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0;
		transform: translateY(41px);
	}
}
@-webkit-keyframes scroll {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0;
		transform: translateY(41px);
	}
}
@-moz-keyframes scroll {
	0% {
		opacity: 1
	}
	100% {
		opacity: 0;
		transform: translateY(41px);
	}
}

参考サイト

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. スクロールを促すシンプルなループアニメーション

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com