【簡単コード】背景画像のパララックスをCSSを使って実装しよう

こんにちは、Webプログラマー見習いのトムです。

さて今回は背景画像のパララックスの実装をやってみたいと思います。ちなみに私、パララックスってcodestepの課題やるまで全く知りませんでした（大汗）。意味を引用してみると以下の通りです。

パララックスとは、視差効果のことです。Webデザインにおけるパララックスはスクロールなどの動作に応じて、複数のレイヤー（層）にある要素を異なるスピードで動かすことで、「立体感や奥行きを演出」、「フェード・拡大縮小・回転などの視覚的エフェクト」を演出する手法を指します。

https://www.wan55.co.jp/news/column/2015/313/

要するにブラウザを動かした時に、複数のコンテンツ（画像だったりテキストだったり）の動きのスピードを変えることで、視覚的な演出を施すことですね。

今回のポイント・・・パララックスの実装には”background-attachment:fixed”を指定する

背景画像のパララックスの実装

今回実現する背景画像のパララックスは．．．

• 通常のテキストコンテンツ
• 背景画像にパララックスを設定した部分
• 通常のテキストコンテンツ

という順番で並んでいるhtmlに対してCSSを使って実装しています。動きとしてはブラウザのスクロールに対し、テキストコンテンツ部分は普通にスクロールさせますが、背景画像の部分は固定されるようにします。これによって、何となく「のぞき窓」を見てる感じになります（正に視差効果、ってヤツですね）

実際のソースと動きを確認してもらうのが早いですので、早速掲載します。

HTML

<section id="contents-01">
  <h1>テキストコンテンツ１</h1>
</section>
<section id="parallax-image">
  <h1>パララックス部分</h1>
</section>
<section id="contents-02">
  <h1>テキストコンテンツ２</h1>
</section>

CSS

#contents-01, #contents-02{
  width:100%;
  height:150px;
  text-align:center;
  padding-top:60px;
  font-size:24px;
}
#parallax-image{
  max-width:100%;
  height:150px;
  font-size:24px;
  color:white;
  padding-top:60px;
  text-align:center;
  background-image: url('https://images.unsplash.com/photo-1630276694996-5b44ff8d335f?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMDY2MTAyMA&ixlib=rb-1.2.1&q=85');
  background-attachment: fixed;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

実行結果

See the Pen Parallax_01 by トム@株＆不動産投資・Webプログラマー (@roby_tom) on CodePen.

CSSのコードのポイントは” background-attachment: fixed; “の部分です。 background-attachment のデフォルト値は”scroll”になっていて、デフォルトではブラウザの動きに合わせて背景画像もスクロールするのですが、fixed　を指定することで背景画像が固定され、視差効果が生まれます。ちなみに”background-position: center top;”は、画像の中心とトップの位置を背景に設定するための指定です。

以上、背景画像のパララックスについて解説しました！