[css+js]ページ内に背景固定を複数設置する方法

自作方面のメモ。

前提
考え方
どうにかする1
どうにかする2
まとめ的なもの

前提

「background-attachment: fixed;」は使わない。

日本のiPhoneのシェアはとんでもなく高く、iPhoneのブラウザは「background-attachment: fixed;」が使えない。それを前提に考えるとすごくめんどくさい構築が要求される。

cssだけじゃどうにもならないことになる。

考え方

ブラウザ幅いっぱいのサイズでposition: fixed;で配置した要素を作れば背景として使うことができる。

例えばこんな感じ。

<body>
<div class="bg"><img src="example.jpg"></div>
</body>

.bg{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}
.bg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

positionを付与するために要素が重ね合わせになるんでz-indexでの調整が必要になる。

画像だけじゃなくて動画もはめ込めるので応用が効く。

画像しか使わないって決めてるなら疑似要素を作ってbackgroundで指定してもいい。
要素自体がスクロールしないんで、「background-attachment: fixed;」を使わずに済むからiPhone上で問題なく動く。

で、ページ内に1箇所だけ背景固定をしたいのであればこれで済むんだけど、パララックス的な感じで複数の背景固定を仕込みたいときは使えない。スクロールしようが何しようが背景要素が重なるから複数設置しても表示は1つだけになる。

どうにかしなきゃいけないぞ、という話。

どうにかする1

背景固定をしたい要素がブラウザ上に表示されたときに背景要素を表示する。そうすれば背景が切り替わる。

自作したのがあるけどチューニングが必要なのでコードは割愛。メモだけ。

背景固定したい要素に背景用の要素を追加する。
背景用要素はブラウザ幅に合わせたサイズにしてposition: fixed;で配置する。
$(window).on(‘scroll resize load’,function(){});で下記を取得。
- ブラウザの高さ：$(window).height();
- スクロール量：$(window).scrollTop();
- 背景固定要素の位置：$(element).offset().top;
- 背景固定要素の高さ：$(element).height();
- 背景固定要素出現位置（ブラウザ下部）：$(element).offset().top – $(window).height();
- 背景固定要素出現位置（ブラウザ上部）：$(element).offset().top + $(element).height();
「背景固定要素がブラウザ上にある」って条件で背景用要素を表示させる。

背景用要素はブラウザ全体に表示されるので、当然ながらこの方法は制限が掛かる。
背景固定以外の要素に背景色を与える必要がある。
背景固定の要素を連続させたい場合には使えない。
複数設置する場合、ブラウザの高さ分以上の間隔を空けないと背景同士の殴り合いが発生する。

どうにかする2

いい参考があった。

【CSS】スクロール時に背景画像が変わるパララックス

今回は【CSS】でスクロール時に背景画像が切り替わるパララックス」について分かりやすく解説いたします。

スクロールに合わせて背景画像の位置を指定する感じ。固定じゃないけどスクロール量に反した動きなので視覚効果として面白みのある感じになる。

まとめ的なもの

パララックスで括ってしまえばライブラリは色々あるんだけど、背景固定だけに焦点を当てるとオーバースペックだしどうなのよって感じになってしまう。

Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。今回...

あと、個人的解釈では背景固定はパララックスと別物というか、一応cssで導入できる範囲内のことだからそこまで大したものじゃないというか、だから単純に呼称を「背景固定」で済ませてしまいたい。

でもiPhone事情のおかげで手間がかかるんで厄介だなーっていう。

色々手法はあるけどそれぞれに一長一短のところがあるから、まずデザインを組んで、コーディングに落とし込むときに考えるようにしたほうがいいと思う。