ライブデモ Live Demo

スクロールに応じて背景画像が前景より遅い速度で動き、奥行き感を演出します。速度比をカスタムプロパティで調整できます。

Background moves slower than foreground on scroll, creating depth. Adjust speed ratio via custom properties.

スクロールしてください

Scroll down

Parallax Effect

Background moves at different speed

続きをスクロール

Keep scrolling

0.5

AI向け説明 AI Description

`L-003` はスクロール位置を監視し、`--scroll-progress` カスタムプロパティを更新します。背景要素はこの値に `--parallax-speed` を掛けて `transform: translateY()` を適用し、前景より遅く動かします。

`L-003` monitors scroll position and updates `--scroll-progress`. Background elements multiply this by `--parallax-speed` and apply `transform: translateY()` to move slower than foreground.

調整可能パラメータ Adjustable Parameters

実装 Implementation

HTML + CSS + JS

<div class="parallax-container">
  <div class="parallax-bg"></div>
  <div class="parallax-content">Content</div>
</div>

<style>
:root {
  --parallax-speed: 0.5;
  --parallax-offset: 0px;
}

.parallax-bg {
  position: absolute;
  inset: -20%;
  background: url('image.jpg') center/cover;
  transform: translateY(var(--parallax-offset));
}
</style>

<script>
const container = document.querySelector(".parallax-container");
const scrollContainer = container.closest("[data-scroll]");

scrollContainer.addEventListener("scroll", () => {
  const rect = container.getBoundingClientRect();
  const containerRect = scrollContainer.getBoundingClientRect();
  const scrollTop = scrollContainer.scrollTop;
  const elementTop = rect.top - containerRect.top + scrollTop;
  const scrollProgress = scrollTop - elementTop;
  const speed = 0.5; // --parallax-speed
  const offset = scrollProgress * speed;
  container.style.setProperty("--parallax-offset", `${offset}px`);
});
</script>

React (JSX + CSS)

// react/L-003.jsx
import { useEffect, useState } from "react";
import "./L-003.css";

export default function ParallaxScroll() {
  const [scrollProgress, setScrollProgress] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      const container = document.querySelector("[data-parallax-container]");
      if (container) {
        const rect = container.getBoundingClientRect();
        const progress = (window.innerHeight - rect.top) / (window.innerHeight + rect.height);
        setScrollProgress(progress);
      }
    };

    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <div className="parallax-container" style={{ ["--scroll-progress"]: scrollProgress }}>
      <div className="parallax-bg" />
      <div className="parallax-content">Content</div>
    </div>
  );
}
/* react/L-003.css */
.parallax-bg {
  position: absolute;
  inset: -20%;
  background: url('image.jpg') center/cover;
  transform: translateY(var(--parallax-offset, 0px));
}

AIへの指示テンプレート AI Prompt Template

以下のテンプレートをコピーしてAIアシスタントに貼り付けると、このパターンの実装を依頼できます。 Copy the template below and paste it into your AI assistant to request an implementation of this pattern.

注意とバリエーション Notes & Variations

`will-change: transform` でパフォーマンスを最適化し、`IntersectionObserver` でビューポート外では計算を停止してください。モバイルではバッテリー消費を考慮して軽量化を検討してください。

Optimize with `will-change: transform` and use `IntersectionObserver` to pause calculations when out of viewport. Consider lighter effects on mobile for battery efficiency.