こんにちはtakosanです。
フロントエンド関心強めのWordPressエンジニアとして働いています。
今回は視差効果の作り方を紹介します。
むっちゃ簡単です。
目次
まずは完成品
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、名前だけでも覚えて帰ってくださいね!
まとめ
視差効果(パララックス)を表現するにはbackground-attachment:fixedとすることで実現可能です。
むっちゃ簡単ですね。