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

ユーザビリティ向上のためにサイトの表示スピードを改善する

highway

真夜中WEBがコンセプトとして掲げる3つの要素に「軽さ」があります。 軽さとは、サイトを構成するhtmlやcss、javascript、php、画像などのファイル群自体の容量の小ささを言いますが、このことだけにとどまらず…続きを読む

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

サイト内で複数の画像をまとめて表示するときに項目でソートできるjqueryのプラグイン「Shuffle.js」。 まずはデモページをご覧ください Shuffle.jsCategorize, sort, and filte…続きを読む

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

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

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

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

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

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

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

3D

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