【簡単】パララックスをCSSで実装する方法【画像スクロール】

こんにちは、mickです。

軽量化のためなるべくJavaScriptライブラリを使いたくない
普段使っているCSSとHTMLだけでパララックスを使いたい

こんな要望の助けになる記事です。

パララックスとは
CSSでパララックスをつくる
まとめ。

パララックスとは

パララックスは、背景とテキストのスクロール速度に差を付けることで、奥行きを錯覚させるテクニックです。

視差効果といって、人が両目を使ってものを立体に見ている仕組みを使ってます。

⇒ 視差についてはこちら（Wikipediaへ）

CSSでパララックスをつくる

さっそくパララックスをCSSで作っていきます。

ポイント2つ。

背景画像の高さ指定する。
背景画像を「background-attachment: fixed」で固定する。

背景画像の高さを指定して、エフェクトの効果的にしてユーザーを引きつけます。
そして、背景画像を固定してパララックスのエフェクトを擬似的につくります。

パララックスのデモ

パララックスのデモがこちら。

パララックス効果

パララックスのデモ

パララックス効果

パララックスのデモ

パララックスなし

実際にみてみると引きつけられるような効果になっていると思います。
パララックスを使った多くは、背景画像を画面全体に広げているのをよく見かけます。

HTMLのコーディング

<div class="parallax-base parallax-demo parallax-demo-bg1">パララックス効果</div>
<div class="parallax-base">パララックスのデモ</div>
<div class="parallax-base parallax-demo parallax-demo-bg1">パララックス効果</div>
<div class="parallax-base">パララックスのデモ</div>
<div class="parallax-base parallax-demo-bg2">パララックスなし</div>

パララックスの効果を高めるために、パララックスの背景と黒背景の文字の背景を交互に並べています。

最後にパララックスなしの背景を付けました。
よりパララックスの効果がわかりやすく見えると思います。

CSSのコーディング

.parallax-base{
margin: 0;
padding: 0;

/* 高さを指定してエフェクトをコントロール */
min-height: 300px;

/* パララックス内に作用させる */
box-sizing: border-box;
background-color: #000;
color: #FFF;
font-size: 4rem;
display: flex;
align-items: center;
justify-content: center;
padding: 5%;
}
.parallax-demo {
/* パララックスをつくる部分 */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.parallax-demo-bg1{
/* 背景画像の指定 */
background-image: url("wp-content/uploads/2020/09/maarten-deckers-9NUeLk0uqME-unsplash.jpg");
}
.parallax-demo-bg2{
  /* 背景画像の指定 */
  background-image: url("wp-content/uploads/2020/09/yamasha_eternal_2_TP_V4.jpg");
}

コーディングの都合上、分けていますがひとつのポイントが「parallax-baseセレクタ」。
「min-height: 300px;」で背景画像のサイズを決めることで、パララックスの効果をより引き立てます。

次のポイントは「parallax-demoセレクタ」。
「background-attachment: fixed;」でパララックスの効果をつくりだしています。
「background-repeat: no-repeat;」で背景画像が並ばないようにします。背景画像が並ぶとパララックスの効果が弱まるからです。
「background-repeat: cover;」で背景画像が画面いっぱいに広がるようにします。
「background-position: center;」で背景画像が中央を基準に設置するようにします。