CSSだけで固定背景(パララックスデザイン)を実装する方法【iOS対応方法も紹介】

スクロールしているけど、背景は動かないページを見たことありませんか？

見た方がわかりやすいと思うので、サンプルをご用意しました。

See the Pen 固定背景 by spiqa design (@spiqa_design) on CodePen.

夜空の画像が配置されている領域をスクロールしている間、画像は固定されて流れていきますね。

このように背景画像を固定することで、画像をユーザーに印象づけることができ、目を引くデザインとなります。

このような効果を「パララックス（parallax）」といいます。
パララックスとは日本語で「視差」という意味で、部分によって遠近差や動く方向の差異のことです。

一見実装するのが難しそうなパララックスデザインですが、実はJavascriptを使わずにCSSのみで簡単に実装することができます！

CSSだけでパララックスデザインを実装！

まずは一番簡単な方法をご紹介します。

以下、冒頭でご紹介したサンプルと同じコードです。パララックスデザインを実装するのに一番簡単な方法で書いています。

※この方法はiOS(iphone)では動きません。iOSでも動作する方法は後述します。

See the Pen 固定背景 by spiqa design (@spiqa_design) on CodePen.

CSSの、bgクラスに指定されているスタイルがパララックスを実装するための記述です。

backgroundで背景画像を表示し、さらにbackground-attachment: fixed;を指定します。

たったこれだけで背景を固定し、パララックスデザインを実装することができます！

パララックスデザインをiOS(iphone)にも対応させる

background-attachment: fixed;はiphoneでは上手く動作しません。iphoneで動かないというのは致命的ですよね。

iOSにもパララックスデザインを効かせるためには、別の方法で実装する必要があります。

See the Pen 固定背景(position: fixed) by spiqa design (@spiqa_design) on CodePen.

background-attachment: fixed;を使った時と比べて全く同じ表示になっていますが、別の方法で書いています。

上の方法では、固定背景用のdivタグを用意し、position: fixed;を指定してページ背景に固定させています。そのままだとページの一番上に配置されてしまうので、z-indexにマイナス値を指定してください。

セクションによって固定背景を敷いているのではなく、Webページ全体に固定背景を敷いていることに注意してください。

各セクションごとに背景色を敷かないと、固定した背景画像が顔を出してしまいます！

少し面倒ですが、iOSにも実装するにはこの方法を使うしかありません。

まとめ

iOSが早くbackground-attachment: fixed;で適用できるようになるのを願うばかりです。

ちなみにposition: fixed;の方法だと、ページ全体に敷いているため2つの背景画像を使い分けるといったことはできません。

使い分けるにはJavascriptを使用します。次回はその方法もスピカノートでご紹介したいと思います！

こちらもおすすめ

[card url=”https://note.spiqa.design/wp/background/”]