CSSだけで実装！パララックス・スクロールエフェクト

@ハクト 2023-08-09 11:56:08に投稿

よくおしゃれなデザインのWEBページなどで、背景画像と前景の要素が異なる速度でスクロールするサイトを見かけたことがありませんか？

そのようなスクロール操作によるエフェクトを業界用語で「パララックス」と呼ばれています。

このパララックスを取り入れることで視覚的な深みや動きをウェブページにもたらすことができます。

今回の記事では、そんな「パララックス効果」をJSを使わずに、CSSだけで実装するサンプルを紹介します。

初心者の方でも簡単に取り組むことができるので、ぜひ参考にしてください。

パララックスのサンプル

以下が今回のパララックスのサンプルとなります。スクロールすると動作を確認できます。

「background-attachment: fixed;」で実装する

「background-attachment: fixed;」を指定すると簡単にパララックス効果を実装できます。以下がソースです。

<div class="parallax bg-01"></div>
<div class="content"><p>content</p></div>
<div class="parallax bg-02"></div>

.content {
    display: grid;
    place-content: center;
    height: 100vh;
    background-color: #efefef;
    color: #353535;
    font-size: 26px;
    text-align: center;
}

.parallax {
    width: 100%;
    height: 100vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-01 {
    background-image: url(...);
}

.bg-02 {
    background-image: url(...);
}

「background-attachment: fixed;」とは

「background-attachment」プロパティは背景画像の固定方法を指定できます。「fixed」を指定すると背景画像がブラウザのビューポート（表示領域）に対して固定されます。

今回画像要素に対してのみ「background-attachment: fixed;」プロパティを指定しているので、ページをスクロールしても画像は固定で表示され、「content」クラスの要素が画像の上をスクロールします。

「background-attachment: fixed;」の問題点

「background-attachment: fixed;」はiOSの特にsafariでは正常に動作しません。iOSでも動作させるためには下記の方法で実装します。

「clip-path: inset(0);」「position:fixed;」で実装する

パララックスを実装する各コンテンツ要素に親要素を設け「clip-path: inset(0);」を指定し、背景画像を「position:fixed」で固定してパララックスを実装してます。

<div class="section">
    <div class="section-layer">
        <div class="parallax bg-01"></div>
    </div>
</div>
<div class="section">
    <div class="section-layer">
        <div class="content">
            <p>content</p>
        </div>
    </div>
</div>
<div class="section">
    <div class="section-layer">
        <div class="parallax bg-02"></div>
    </div>
</div>

.section {
    position: relative;
    width: 100vw;
    height: 100vh;
}

.section-layer {
    position: absolute;
    inset: 0;
    clip-path: inset(0);
    /* 要素全体をクリップ */
}

.content {
    display: grid;
    place-content: center;
    height: 100vh;
    background-color: #efefef;
    color: #353535;
    font-size: 26px;
    text-align: center;
}

.parallax {
    position: fixed;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-01 {
    background-image: url(...);
}

.bg-02 {
    background-image: url(...);
}