こんにちは、Haruです。
この記事ではCSSのみでパララックスを実装する方法をご紹介します！
パララックスとは？
パララックスとは視差のことです。
スクロール等の動作に応じて複数のレイヤーにある要素を異なるスピードで動かして、立体感や奥行きを生み出す視差効果のことです。
Haru
パララックスを実装すると、動きが出たように見えてとても面白いですね♪
CSSでパララックスを実装する方法
今回は2枚の別画像の間にコンテンツを挟む形式で実装しました。
<!--固定背景画像1-->
<div class="fixed-bg bg-1"></div>
<!--ここにコンテンツが入ります-->
<section class="menu">
～～省略～～
</section>
<!--固定背景画像2-->
<div class="fixed-bg bg-2"></div>.fixed-bg {
position: relative;
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
z-index: 2;
}
/*固定背景画像1*/
.bg-1 {
height: 450px;
width: 100%;
background-image: url(表示させる画像パス);
}
/*固定背景画像2*/
.bg-2 {
width: 100%;
height: 450px;
background-image: url(表示させる画像パス);
}SCSSの方で記述しているbackground-attachment: fixed;がポイントです。
スクロールしても背景画像は固定された状態になり、パララックスを演出することができます。
まとめ
JavaScript等を使って実装する方法もありますが、CSSでできると楽なので今回はこの方法で実装しました。
