パクリというよりはオマージュ。
どういうことか
パララックス的なことがしたいとか理由はどうあれ、ページをスクロールしたときに背景画像はスクロールさせずに固定表示したいよねって時がある。コンテンツ領域に耐えられる画像サイズを用意できない場合にも表示領域さえ確保できたら済むことになるので活用シーンは多い。
導入自体は簡単で、cssだけで完結する。
.bg{
background: url(背景画像) no-repeat center;
background-size: cover;
background-attachment:fixed;
}だけど、これはiPhoneに対応してないのでレスポンシブ前提のページには使えないぞどうすんだよって話。バグだとか言われてるけど流石に何年も放置されてるなら仕様だと割り切ったほうが早い。
要するに、諦めたくなかったらbackground-attachment:fixed;とbackground-size: cover;の組み合わせを使わずに背景固定しようぜっていうレギュレーションが発生している。
ネタは既にあがっている
検索すれば2018年にとてもわかりやすい記事が書かれている。
この記事に似た内容をアップしてる人もいるから鉄板なんだろうね。
cssで完結できる対処法なのでとても素晴らしいんだけど、でもまあこれもちょっと難点がある。
ページ自体に背景画像が付いちゃうことになる。だから、一部のコンテンツだけ背景固定やりたいのにって場合に向かない。コンテンツをブラウザ幅いっぱいの領域で切って、表示させたくないときは背景色をつけるみたいなことで対応することになる。あと、この方法だと1ページに1枚しか背景固定ができないって制限も掛かることになる。ならない？なるよね。
ページ内に複数設置できる背景固定方法（仮）
html側にタグを加えなきゃいけないけどまあ、悪くはない。
厳密に言うと背景固定じゃない。
<div class="wrap">
<div class="content"></div>
<div class="bg"><div class="inner"></div></div>
</div>.wrap{ position: relative;}
.bg{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.bg .inner{
width: 100%;
height: 100vh;
background: url(背景画像) no-repeat center;
background-size: cover;
display: block;
position: sticky;
top: 0;
}こんな感じ。
position:absolute;でコンテンツの裏側に.bgを設置。.innerを表示領域サイズにして、position:sticky;でスクロール追従にして、やる。
position:sticky; だから、背景領域がブラウザに収まるまではスクロールするし、ケツまで来たときもスクロールする。疑似固定です。
position:sticky; はこの記事を読むと理解しやすい。
object-fitのことを考えたら.innerに<img>をぶち込んじゃってもいいんだけど、背景画像を選択できるって状況があまり好きじゃないのでcss側で指定した。応用として、.innerにスライダーを入れたら切り替わる背景画像が導入できる。
気分が変わったら位置を変えて背景をアイキャッチ化することも簡単だし、良いんじゃないでしょうか。
コメント