【CSSだけ】カーテンのようなスクロール効果をたったの2行で実装する方法

スクロールするとカーテンが上がるようなエフェクトの実装方法をご紹介します。
CSSの「position: sticky;」を使うと、たったの2行で実装することができます。

画像やテキストなどを含めたセクションを、まるごと対応できるので、さまざまなシーンで利用できます。

デモ

まずはデモをご覧ください。

スクロールすると、下にあるコンテンツが覆いかぶさるように現れます。
「background-attachment: fixed;」の挙動に似ていますね。

実装方法

HTML

<section>
	<p>section01</p>
</section>

<section>
	<p>section02</p>
</section>

セクションごとに<section>タグで区切ります。
<div>や<article>など、セクションごとに囲ってあればタグは何を使用しても問題ありません。

CSS

section {
	position: sticky;
	top: 0;
}

CSSはこれだけです。
すべてのセクションに対して指定する必要があります。

おまけ

一部のセクションだけエフェクトなし

「セクション2番目～3番目にかけては、スクロールエフェクトを実装しない」といったこともできます。
CSSは同じで、HTML側を少し変更します。

デモ

スクロールしていくと、2番目～3番目の部分だけ、通常の表示になっています。

HTML

<article>
	<section>
		<p>section01</p>
	</section>

	<section>
		<p>section02</p>
	</section>
</article>

<article>
	<section>
		<p>section03</p>
	</section>

	<section>
		<p>section04</p>
	</section>

	<section>
		<p>section05</p>
	</section>
</article>

1～2番目まで、3～5番目までをそれぞれタグで囲って分離します。
これで、デモのように2～3番目にかけてはエフェクトが効かなくなります。

CSS

section {
	position: sticky;
	top: 0;
}

CSSはまったく同じです。
<article>にかけるのではなく、<section>に記述してください。

見出しもカーテン風に

セクションではなく、見出しに「position: sticky;」をかければ、見出しをカーテン風にすることもできます。
下にある見出しが上に重なっていくので、ユーザビリティも向上します。

デモ

HTML

<section>
	<h1>タイトル1-1</h1>
	<p>...</p>
	
	<h1>タイトル1-2</h1>
	<p>...</p>
	
	<h1>タイトル1-3</h1>
	<p>...</p>
</section>

<section>
	<h1>タイトル2-1</h1>
	<p>...</p>
	
	<h1>タイトル2-2</h1>
	<p>...</p>
	
	<h1>タイトル2-3</h1>
	<p>...</p>
</section>

<section>
	<h1>タイトル3-1</h1>
	<p>...</p>
	
	<h1>タイトル3-2</h1>
	<p>...</p>
	
	<h1>タイトル3-3</h1>
	<p>...</p>
</section>
...

少し長いですが、同じ構成の繰り返しです。

CSS

h1 {
	position: sticky;
	top: 20px;
}

<h1>に対して「position: sticky;」を指定します。
「top: 20px;」は、上から20pxの位置で固定するという命令です。

「タイトル1-2」⇒「タイトル1-3」は覆いかぶさり、
「タイトル1-3」⇒「タイトル2-1」は押し出すような挙動をしていますね。

これは「position: sticky;」の特性です。
「position: sticky;」を複数の要素に指定している場合、同じブロック内にあるか異なるブロック内にあるかによって、下記のように挙動が変化します。

これらを理解して、セクションごとに違う動きにするとおしゃれな演出ができそうです。

まとめ

jQueryやJavascriptを使わずに簡単にスクロールエフェクトが実装できます。
たったこれだけでサイトの印象はガラッと変わります。
よりリッチな表現ができるようになるので、是非取り入れてみてください。