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

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

こんにちは、mickです。

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

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

パララックスとは

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

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

⇒ 視差についてはこちら(Wikipediaへ)

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

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

ポイント2つ。

  1. 背景画像の高さ指定する。
  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;」で背景画像が中央を基準に設置するようにします。

まとめ。

パララックスをCSSを使って実装する方法を紹介しました。

parallax.jsのJavaScriptライブラリを使わないので設定も楽。
なによりJavaScriptライブラリの設定でハマらないのがいいです。

注意点としては、iOSやAndroidといったスマホやタブレットではパララックスの視覚効果が得られないことです。

これはJavaScriptライブラリを使ってパララックスを実現するのと同じです。

CSSでの実装ならよりお手軽に視覚効果を実現できます。
視覚効果をみるだけでも面白いのでぜひ試してみてください。

JavaScriptのライブラリを使ってパララックスを実現するのはこちらの記事に書いています。

JavaScriptライブラリを使うとパララックスのスクロール速度を変更できるといった細かな設定が簡単にできるようになります。

以上、みなさまの助けなれば幸いです。

初稿 2020/10/03

タイトルとURLをコピーしました