【CSS】clip-pathで作る背景パララックス

2025/04/01

ブラウザをスクロールすると、画像が固定されてスクロールするパララックス効果を紹介します。
最も簡単な方法は、CSSのbackground-attachment: fixed;を使用することですが、iOSではバグにより正しく機能しない場合があります。
そのため、代わりにclip-pathを使用した方法で実装します。

サンプルをご覧ください

上記のサンプルを下にスクロールしてください。
セクションに設置した3枚の画像がパララックスしていると思われます。
こちらの実装方法について解説します。

HTMLの記述について

<section class="section">
  <div class="content">
    <h2 class="heading">SECTION 01</h2>
  </div>
  <div class="clip">
    <div class="img" style="background-image: url(https://unsplash.it/1600/900);"></div>
  </div>
</section>

<section class="section">
  <div class="content">
    <h2 class="heading">SECTION 02</h2>
  </div>
  <div class="clip">
    <div class="img" style="background-image: url(https://unsplash.it/1600/901);"></div>
  </div>
</section>

<section class="section">
  <div class="content">
    <h2 class="heading">SECTION 03</h2>
  </div>
  <div class="clip">
    <div class="img" style="background-image: url(https://unsplash.it/1600/902);"></div>
  </div>
</section>

セクション内に.imgを設置して、background-imageで画像を入れてます。
今回はHTMLのインラインコードで画像を入れてますが、CSSで指定しても良いです。

.imgの親要素の.clipで、画像をクリッピングします。

CSSの記述について

.content{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #000;
}
.heading{
  font-size: 40px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.clip{
  height: 100vh;
  clip-path: border-box;
}
.img{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

.imgはposition: fixedで固定し、画面全体に広がるように設定しています。
.clipでは、画面いっぱいに広がった画像にクリッピングマスクを適用して隠しています。