タイトルを読んだだけではイマイチ分かりにくいので、下記デモページをご覧ください。
デモページを見る
ご確認いただけましたか？そうです、よく見かけるやつです。
※ただこの方法、ものすごく簡単なんですがスマートフォン（多分タブレットも）では背景が固定されません。
どうも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にして背景画像要素とテキスト要素を交互に配置してるから結果的にテキスト要素が通り過ぎるごとに画像が切り替わってるように見えるようにする方法」といえるでしょう。
