CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSだけで実現する視差スクロール（パララックス）効果の作り方

Webサイトに動きと奥行きを与える演出のひとつに「視差スクロール（パララックススクロール）」があります。背景画像と前景コンテンツのスクロール速度に差をつけることで、画面に立体感が生まれ、ユーザーを引き込む印象的なデザインになります。

実は、JavaScriptを使わなくても、CSSのbackground-attachment: fixedを活用するだけで、簡単にパララックス効果を実現できます。このプロパティを指定すると、ページをスクロールしても背景画像が固定されたまま表示され、その上を前景のコンテンツが流れるように動くため、視差が生まれる仕組みです。

パララックス効果の基本ポイント

  • background-attachment: fixed … 背景画像をビューポートに対して固定し、スクロール時に動かないようにします
  • background-size: cover … 背景画像が領域全体を覆うように拡大・縮小されます
  • background-position: center … 背景画像を中央に配置して見栄えを整えます

CSSパララックススクロールのサンプルコード

以下は、2枚の背景画像セクションの間にテキストコンテンツを挟んだ、典型的なパララックス構成の例です。

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
   height: 100%;
   text-align: center;
}
.example {
   height: 100%;
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
#demo {
   background: url("https://images.unsplash.com/photo-1612698565524-1101522e9a21?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
}
#dist {
   height:150px;
   background-color: rgba(102,234,99,0.5);
   padding: 2%;
}
#d2 {
   background: url("https://images.unsplash.com/photo-1611489473774-5d881f1153f1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
}
</style>
</head>
<body>
<div id="demo" class="example"></div>
<div id="dist">
Sed a porttitor enim. Integer euismod dui massa, at posuere sem fermentum at. Fusce vehicula
fringilla tortor, ut mattis sapien tristique ac. Phasellus eleifend malesuada orci, et facilisis arcu
egestas vel. Duis in tempus libero. Nunc nibh arcu, tempus quis lectus ut, blandit tincidunt felis. Suspendisse potenti.
</div>
<div id="d2" class="example"></div>
</body>
</html>

コードの解説

  • .exampleクラスには高さ100%を指定し、背景画像関連のプロパティをまとめて設定しています。background-attachment: fixedがパララックス効果の核となる部分です。
  • #demoと#d2には、それぞれ異なるUnsplashの画像URLを背景として指定しています。
  • #distは前景側のコンテンツエリアで、半透明の緑色（rgba(102,234,99,0.5)）の背景色を付けています。ここに文章などを配置することで、固定された背景との対比が際立ちます。

表示結果

このコードをブラウザで開くと、まず最初の背景画像が全画面で表示され、下にスクロールすると半透明の緑のコンテンツエリアが現れます。さらにスクロールを続けると、2枚目の背景画像がゆっくりと現れ、背景は固定されたまま前景だけが動くため、奥行きのある視差効果を体感できます。

CSSだけで実現する視差スクロール（パララックス）効果の作り方

CSSだけで実現する視差スクロール（パララックス）効果の作り方

注意点と補足

  • iOS版Safariなど一部のモバイルブラウザではbackground-attachment: fixedが正しく機能しない場合があります。モバイル対応が必要な場合は、JavaScriptやtransformを使った代替手法を検討しましょう。
  • 大きな背景画像を複数使うとページの読み込みが遅くなるため、画像の最適化（圧縮や遅延読み込み）もあわせて行うのがおすすめです。

このように、CSSの数行の指定だけで手軽にパララックススクロールを実装できます。ランディングページやポートフォリオサイトなどで、ぜひ活用してみてください。

  1. CSSのborder-imageプロパティで境界線画像を作成する方法

    CSSで要素の境界線に画像を表示したい場合は、border-imageプロパティを使用します。通常の実線や点線ではなく、任意の画像を境界線として描画できるため、デザインの幅が大きく広がります。 border-imageプロパティの基本 border-imageプロパティは、主に次の3つの要素を組み合わせて指定します。 画像のURL … 境界線に使用する画像をurl()で指定します。 スライス値 … 画像をどのように分割して配置するかを、数値(px)またはパーセントで指定します。 繰り返し方法 … round(領域に収まるよう間隔を調整して繰り返し)やrepeat(そのまま繰り返し)などを指定

  2. CSSだけで実現する視差スクロール（パララックス）効果の作り方

    Webサイトに動きと奥行きを与える演出のひとつに「視差スクロール（パララックススクロール）」があります。背景画像と前景コンテンツのスクロール速度に差をつけることで、画面に立体感が生まれ、ユーザーを引き込む印象的なデザインになります。実は、JavaScriptを使わなくても、CSSのbackground-attachment: fixedを活用するだけで、簡単にパララックス効果を実現できます。このプロパティを指定すると、ページをスクロールしても背景画像が固定されたまま表示され、その上を前景のコンテンツが流れるように動くため、視差が生まれる仕組みです。パララックス効果の基本ポイントbackgrou