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

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

CSSだけで視差スクロール（パララックス）効果を実現するには、background-attachment: fixed; を使用します。このプロパティを指定すると、背景画像がブラウザの表示ブラウザの表示領域（ビューポート）に固定され、ページをスクロールしても背景だけが動かなくなります。その結果、前景のコンテンツと背景との間に速度の違いが生まれ、奥行きのある視差効果を演出できます。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        height: 100vh;
        margin: 0px;
        padding: 0px;
    }
    .parallax {
        background-image: url("https://i.picsum.photos/id/250/800/800.jpg");
        height: 100%;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .parallaxText {
        font-size: 20px;
        height: 100%;
    }
</style>
</head>
<body>
<div class="parallax"></div>
<div class="parallaxText">
<h1>ランダムなテキスト</h1>
<h1>ランダムなテキスト</h1>
<p>
ここには自由に文章を入力できます。背景画像は固定されたままなので、
このテキスト部分だけがスクロールして動き、背景との間に視差が生まれます。
</p>
</div>
<div class="parallax"></div>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、まず全画面に背景画像が表示されます。

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

少し下にスクロールすると、背景画像は固定されたままテキスト部分だけが流れていくため、以下のように視差スクロール効果を確認できます。

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

ポイント解説

  • background-attachment: fixed; … 視差効果の核心となるプロパティ。背景画像をビューポートに固定します。
  • background-size: cover; … 画像を領域全体に拡大表示し、余白が出ないようにします。
  • height: 100%; … 各セクションを画面いっぱいの高さにすることで、背景とコンテンツの切り替わりを際立たせます。

なお、iOS版Safariなど一部のモバイルブラウザでは background-attachment: fixed が正しく機能しない場合があります。そのような環境では、JavaScriptや transform を組み合わせた代替手法を検討するとよいでしょう。

  1. CSSで矢印を作成する方法！borderとrotateを組み合わせた4方向矢印の実装テクニック

    CSSでは、画像やアイコンフォント、外部ライブラリに頼らなくても、border（境界線）とtransform: rotate()を組み合わせるだけで、上下左右どの方向の矢印でも簡単に作成できます。境界線でL字型の角を作り、それを回転させるのが基本的な考え方です。 サンプルコード <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>

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

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