スクロールダウンアニメーションのCSSコードを1つずつ理解しよう！

スクロールを促すおしゃれな「Scroll Downアニメーション」。

今回は、実際のCSSコードをベースに、1行1行どんな意味があるのかをわかりやすく解説していきます。

今回のコードの完成品

Scroll

1. HTML構造のおさらい

<div class="scroll-indicator">
  <span class="scroll-indicator__text">Scroll</span>
  <span class="scroll-indicator__line"></span>
</div>

※今回のスクロールダウンはposition: absolute;を使用するため、親要素にposition: relative;が必要です。

<section class="hero-section">
  <div class="scroll-indicator">
    <span class="scroll-indicator__text">Scroll</span>
    <span class="scroll-indicator__line"></span>
  </div>
</section>

.hero-section{
  position: relative;
  width: 100%;
  height: 300px;
  background-color: #eee;
}

2. CSSコード解説

.scroll-indicator 全体のスタイル

.scroll-indicator {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -70%);
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 10;
}

解説

プロパティ	意味・役割
position: absolute;	親要素を基準に絶対位置で配置します。
top: 100%;	親要素の下端ちょうどの位置に配置。
left: 50%;	横方向の位置を**中央（50%）**に設定。
transform: translate(-50%, -70%);	50%横にずらして中央寄せ、さらに縦方向に70%上に調整し、見栄えよく配置。
display: flex; flex-direction: column;	縦方向に並ぶようにする（Scrollテキストと縦線が縦に並ぶ）。
align-items: center;	中央揃え。
z-index: 10;	他の要素の上に表示させるためのレイヤー順。

---

.scroll-indicator__text のスタイル

.scroll-indicator__text {
	display: inline-block;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 0.2em;
	margin-bottom: 10px;
	color: #2d71b7;
}

解説

プロパティ	意味・役割
display: inline-block;	ブロック要素のように余白や幅調整が可能なインライン表示。
text-transform: uppercase;	大文字表示に変換。
font-size: 14px;	文字サイズ設定。
letter-spacing: 0.2em;	文字間を少し広げて見やすく。
margin-bottom: 10px;	下に10pxの余白を確保（縦線との間隔）。
color: #2d71b7;	文字色（青系カラー）設定。

---

.scroll-indicator__line 縦棒のスタイル

.scroll-indicator__line {
	position: relative;
	display: block;
	width: 2px;
	height: 100px;
	margin: 0 auto;
	background: #ddd;
	overflow: hidden;
}

解説

プロパティ	意味・役割
position: relative;	後で擬似要素（::after）を配置しやすくするため。
display: block;	ブロック表示にして幅・高さが効くように。
width: 2px; height: 100px;	細長い縦棒を作る設定。
margin: 0 auto;	左右中央揃え。
background: #ddd;	下地の縦棒の色（薄グレー）。
overflow: hidden;	アニメーション中のはみ出しを隠すため。

---

.scroll-indicator__line::after アニメーション部分

.scroll-indicator__line::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 2px;
	height: 100%;
	background: #2d71b7;
	animation: scroll-line 2s cubic-bezier(1, 0, 0, 1) infinite;
}

解説

プロパティ	意味・役割
content: '';	擬似要素なので空のコンテンツ。
position: absolute; bottom: 0; left: 0;	縦棒の下端スタート位置を設定。
width: 2px; height: 100%;	元の縦棒と同じ大きさ。
background: #2d71b7;	アニメーションさせる色付きの縦棒（青色）。
animation: scroll-line 2s cubic-bezier(1, 0, 0, 1) infinite;	伸び縮みのアニメーション設定。

---

キーフレームアニメーション

@keyframes scroll-line {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	50.1% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
	}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}

解説

時間 (%)	何が起こってるか
0%	縦方向に縮んだ状態（高さゼロ）、下から伸びる準備。
50%	縦棒がフルで伸びた状態、下から上へ伸びてる。
50.1%	originを上端に変更し、逆方向の縮みに備える。
100%	上から下に縮んで消える。

→ 結果、縦棒がスッと伸びてスッと消えるような動きに。

---

まとめ

このスクロールインジケーターのCSSは…

• 親要素を絶対配置＆中央寄せ
• テキストは大文字＆縦書き
• 縦棒は背景とアニメーション用の二重構造
• 擬似要素で縦棒にスムーズな伸縮アニメーション

…と、非常にキレイな構成で作られています！

---

もっと応用したい方へ

• 色や高さを変えたい場合 → .scroll-indicator__lineや:afterのbackgroundとheightを調整。
• アニメーション速度変更 → animation: scroll-line 2s の 2s を変える。
• スクロール促進のテキスト位置調整 → .scroll-indicatorのtransformで調整可能。

---