[CSS]下にスクロールしろという案内をふわふわアニメートするCSS

トップページに全画面イメージを表示させると、ユーザが「これですべてのコンテンツなんだ！」と勘違いされてしまうことがあるようです。

そんな時には、このCSSが多少役に立つかと。

HTML

<p class="scroll-announce">下にスクロールしてね</p>

CSS

body {
    background: #000;
    color: #fff;
    min-height: 1000px;
}
.scroll-announce {
    text-align: center;
    position: relative;
}
.scroll-announce:after {
    font-size: 40px;
    font-weight: bold;
	display: block;
    text-align: center;
	content: "↓";
	position: absolute;
	left: 50%;
	left: calc( 50% - 24px );
	bottom: -100px;
	width: 48px;
	animation: scroll-announce 3s ease infinite;
}

@keyframes scroll-announce {
	0% { transform:translateY(0) }
	70% { transform:translateY(-15px) }
	100% { transform:translateY(0) }
}

Run Result

コメントを残すコメントをキャンセル

This site uses Akismet to reduce spam. Learn how your comment data is processed.

月	火	水	木	金	土	日
« 5月
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

[CSS]下にスクロールしろという案内をふわふわアニメートするCSS

HTML

CSS

Run Result

コメントを残すコメントをキャンセル

サイト内検索

Ads

最近の投稿

カテゴリー

カレンダー

MENU

カテゴリー

Ads

HTML

CSS

Run Result

コメントを残す コメントをキャンセル

サイト内検索

Ads

最近の投稿

カテゴリー

タグ

カレンダー

MENU

カテゴリー

タグ

Ads

コメントを残すコメントをキャンセル