【簡単】パララックス 視差効果の実装方法を解説

今回は視差効果の作り方を紹介します。

むっちゃ簡単です。

まずは完成品

See the Pen parallax-attachment by takosan (@Yukiwebcreate) on CodePen.

HTMLとCSSのタブを押せばコードは全て確認できます。

解説

ここからはコードの解説をしていきます。

まずはHTML。こちらは何の変哲もないHTMLです。

<div class="content">
  <h1>上部のテキストコンテンツ</h1>
  <p>こちらはテキストのサンプルです。</p>
</div>

<!-- パララックス効果のセクション。ここに背景画像を入れます。 -->
<div class="parallax"></div>

<div class="content">
  <h1>下部のテキストコンテンツ</h1>
  <p>こちらもテキストのサンプルです。</p>
</div>

さて、肝心なのはCSSです。コード全体は以下の通り。

.content {
  padding: 100px 0;
  text-align: center;
}

.parallax {
  /* 画像の高さと幅の設定 */
  height: 400px;
  width: 100%;

  /* パララックス効果 */
  background-image: url("~~/sample.jpg");
  background-attachment: fixed; /* これが一番重要 */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

視差効果を出すために今回使用しているのは

background-attachmentです。

background-attachmentとは…

CSS のプロパティで、背景画像の位置をビューポートの中で固定するか、包含ブロックと一緒にスクロールするかを設定します。

MDN web docs (https://developer.mozilla.org/ja/docs/Web/CSS/background-attachment)

background-attachment：fixedとすることで、背景画像が固定されます。

これにより、ユーザーがページをスクロールしても背景画像は動かず、

その前面にあるコンテンツだけが移動します。

これがいわゆる視差効果、パララックスと呼ばれるものです。

その他のbackground-○○は画像の位置調整用です。

まとめ

視差効果（パララックス）を表現するにはbackground-attachment:fixedとすることで実現可能です。

むっちゃ簡単ですね。