CSS

2021.07.14

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を使用します。次回はその方法もスピカノートでご紹介したいと思います!

こちらもおすすめ

この記事をシェアする

関連記事

  • 2022.02.25

    【CSS】グーやパーに変形!マウスカーソルに掴む動作を実装する方法

    CSS

  • 2022.01.24

    効率的なCSS記述になる!inherit の使い方

    CSS

  • 2021.11.02

    CSSのcursor:pointerが効かない時にまず確認したい3つのこと

    CSS

おすすめ記事

  • 好きなフォントは?現役WEBデザイナーに聞いてみた!

    2022.06.01

    デザイナーなら好きなフォントの1つや2つあるでしょ?現役WEBデザイナーに好きなフォント聞いてみた!

    デザイン

    制作

  • 2022.04.22

    【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

    デザイン

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

×