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

もっともっとモックアップを活用しよう 1

candle-mock-up

Mockup(モックアップ ※模型の意)とはデザインなどの現場で使われる手法の一つで、作成過程で完成イメージをビジュアル的に確認するために使われるもので、プレゼンテーションやブランディングイメージ作成シーンに欠かせないも…続きを読む

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

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

WEB制作お役立ちツール1 (人型アイコン、アバター画像作成)

WEBサイト制作では、暫定的に使う、いわゆる「アテ」画像がほしいときがあります。 一言でアテといっても、写真ぽいアテ、無地画像のアテなど案件によって様々です。 このような画像は「ダミー画像」などで検索するとたくさん出てく…続きを読む

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

2018年7月16日よりgooglemapの仕様変更に伴ってgooglemapAPIを使って呼び出している地図(カスタマイズを施しているものを含む)を表示するにはAPIキーとお支払い情報の設定が必須となりました。 このこ…続きを読む

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

3D

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

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

typewriter

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