CSSパララックス効果（Parallax Effect）の使い方

Posted on 2023年8月31日2023年9月10日 by 小清水和真

CSSパララックス効果は、ウェブデザインに奥行きと動きを加える効果的な手法です。
背景と前景の要素が異なる速さでスクロールすることで、奥行き感を演出します。
ここでは、基本的なパララックス効果の作成方法と実装例を紹介します。

1. 基本的なパララックスの作成

まず、背景となる要素を選んでください。
通常、セクションの背景画像やビデオが選ばれます。
次に、前景の要素を配置します。

<section class="parallax">
  <div class="parallax-bg"></div>
  <div class="parallax-content">
    <h2>パララックス効果</h2>
    <p>スクロールに合わせて背景と前景が移動する効果</p>
  </div>
</section>

.parallax {
  position: relative;
  height: 600px;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg');
  background-size: cover;
  background-position: center;
  transform: translateZ(-1px) scale(2);
}

.parallax-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 100px 0;
}

2. スクロールに応じた移動

パララックスの効果を得るために、スクロールに応じて要素を移動させる必要があります。
これはJavaScriptを使用して行います。

const parallax = document.querySelector('.parallax');
const parallaxBg = document.querySelector('.parallax-bg');

window.addEventListener('scroll', function() {
  const scrollPosition = window.pageYOffset;
  parallax.style.transform = `translateY(${scrollPosition * 0.5}px)`;
  parallaxBg.style.transform = `translateY(${scrollPosition * -0.5}px)`;
});