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にして背景画像要素とテキスト要素を交互に配置してるから結果的にテキスト要素が通り過ぎるごとに画像が切り替わってるように見えるようにする方法」といえるでしょう。

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

ブログの記事などで絵文字を使いたいなという場面がありますが、絵文字はOSやブラウザなどの環境によって表現に違いがあったりなどはまだいい方で、最悪表示されないことも想定しなければならないのが困るところです。&#x1F617…続きを読む

Atom vs VSCode vs Brackets、もっとも使いやすいエディタはこれだ!…といいな

typewriter

真夜中WEBではWYSIWYGエディタを使用せず、テキストエディタを使ってホームページ制作を行っております。 具体的にはWindowsでは「サクラエディタ」を、Macでは「mi」を使用しているんですが、OSごとにエディタ…続きを読む

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

htmlコーディングの骨組みとなるhtml5のテンプレートとコーディングを行う上でよく使うスニペットをまとめました。真夜中WEBではご依頼内容に合わせた手打ちのコーディングを行っておりますので備忘録の意味合いもあります。…続きを読む

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

しょっちゅう使うわけではないけれど、ワードプレスを使うサイトが多くなってきたことに伴い使う頻度は増えてきたワードプレスの関数をその都度調べて記述するのもめんどくさくなってきたのでまとめてみました。 ● まずは、htmlフ…続きを読む

ホームページに3DCGコンテンツを埋め込んでブラウザでグリグリ動かす1

3D

3DCGコンテンツの埋め込み方法としては、 1、sketchfabという3DCGデータ投稿・共有サービスを利用してサクッと埋め込む方法 Sketchfab – Your 3D content on web, …続きを読む

facerigや3teneで動かせるようにLive2Dでモーションをつける

デモのため真夜中WEBのマスコットキャラクターを制作してみました。 制作の流れは以下のようになります。 ① ペイント系ソフトでキャラクターのイラストを制作して画像エクスポートする。 ② 画像編集ソフトで画像をインポートし…続きを読む