CSSだけで実装できる! スクロールした時に画像以外のコンテンツを挟んで背景画像を切り替える方法

タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。

デモページを見る

ご確認いただけましたか?そうです、よく見かけるやつです。

※ただこの方法、ものすごく簡単なんですがスマートフォン(多分タブレットも)では背景が固定されません。
どうもbackground-attachment:fixedが効かないようですね…。

タイトルでは「コンテンツを挟んで」となっていますが、コンテンツははさまなくても大丈夫です。
ただ、コンテンツを挟まないと画像の切り替わりポイントがはっきりしすぎてしまうので、挟んだほうが自然です。

実は仕組み自体はごく単純で、javascript等は一切使用せずCSSのみで実装可能です。

背景画像が固定されているために、背景画像を設定しているコンテンツのレイヤーの上を背景画像を設定していないコンテンツのレイヤーがスクロールで通り過ぎているように見えますが、実際にはすべてのコンテンツがスクロールされています。
あくまでも固定されているのは「動いている(スクロールしている)コンテンツ」の「背景画像」だけです。

なので、htmlとしては単純で、body内に以下を記述します。

<div class="bg1"></div>
<div class="scroll"></div>
<div class="bg2"></div>
<div class="scroll"></div>
<div class="bg3"></div>
<div class="scroll"></div>
<div class="bg4"></div>
<div class="scroll"></div>

cssも単純で、以下のようにします。

.bg1 {
height: 600px;
background-image: url('../image/a1.jpg');
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
z-index: 1;
}

.bg2 {
height: 600px;
background-image: url('../image/a2.jpg');
background-size: cover;
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
z-index: 1;
}

 .bg3 {
height: 600px;
background-image: url('../image/a3.jpg');
background-size: cover;
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
z-index: 1;
}

 .bg4 {
height: 600px;
background-image: url('../image/a4.jpg');
background-size: cover;
background-attachment:fixed;
background-repeat: no-repeat;
background-position: center center;
z-index: 1;
}

.scroll {
height: 1000px;
z-index: 2;
}

ですので、この記事の正確なタイトルとしては、「すべての要素が単純にスクロールしているだけなんだけど、背景画像要素の背景をbackground-position:fixedにして背景画像要素とテキスト要素を交互に配置してるから結果的にテキスト要素が通り過ぎるごとに画像が切り替わってるように見えるようにする方法」といえるでしょう。

Open Street MapはGoogle Mapの代替案となりえるのか

タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。 デモページを見る ご確認いただけましたか?そうです、よく見かけるやつです。 ※ただこの方法、ものすごく簡単なんですがスマートフォン(多分タ…続きを読む

OSやブラウザで表示に違いが出てしまう絵文字を絵文字フォントで代替する

タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。 デモページを見る ご確認いただけましたか?そうです、よく見かけるやつです。 ※ただこの方法、ものすごく簡単なんですがスマートフォン(多分タ…続きを読む

よく使うワードプレスのphp関数スニペット。随時追加

タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。 デモページを見る ご確認いただけましたか?そうです、よく見かけるやつです。 ※ただこの方法、ものすごく簡単なんですがスマートフォン(多分タ…続きを読む

DNSサーバーを切り替える前に切り替えた後の表示を確認する方法

タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。 デモページを見る ご確認いただけましたか?そうです、よく見かけるやつです。 ※ただこの方法、ものすごく簡単なんですがスマートフォン(多分タ…続きを読む

画像をグループでソート、クリックでライトボックス表示し、かつjquery3.xに対応させる

タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。 デモページを見る ご確認いただけましたか?そうです、よく見かけるやつです。 ※ただこの方法、ものすごく簡単なんですがスマートフォン(多分タ…続きを読む

2018年html5最小テンプレートとよく使うhtmlスニペット

タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。 デモページを見る ご確認いただけましたか?そうです、よく見かけるやつです。 ※ただこの方法、ものすごく簡単なんですがスマートフォン(多分タ…続きを読む