Reactで、スクロールに合わせて背景をゆっくり動かす方法

.parallax {
  position: relative;
  height: 320px;
  overflow: hidden; /* はみ出した背景を切り取る */
}
.parallax-bg {
  position: absolute;
  inset: 0; /* 上下のはみ出しは JavaScript で決める */
  will-change: transform;
}
.parallax-content {
  position: relative; /* 背景より手前に出す */
  padding: 24px;
}

import { useLayoutEffect, useRef } from 'react';
import type { ReactNode } from 'react';

type Props = {
  background: string; // 背景に使う CSS の background の値
  speed?: number; // 背景が動く速さ（スクロールの何倍か）。0.5 なら半分の速さ
  children: ReactNode;
};

export function ParallaxSection({ background, speed = 0.5, children }: Props) {
  const sectionRef = useRef<HTMLElement>(null);
  const bgRef = useRef<HTMLDivElement>(null);

  useLayoutEffect(() => {
    const section = sectionRef.current!;
    const bg = bgRef.current!;
    const reduce = window.matchMedia('(prefers-reduced-motion: reduce)');
    const lag = 1 - speed; // スクロールに対して、背景を遅らせる割合
    let frame = 0;

    // 背景がずれても隙間が出ないように、ずれる最大の量だけ上下にはみ出させる
    const resize = () => {
      const extra = reduce.matches ? 0 : (lag * (window.innerHeight + section.offsetHeight)) / 2;
      bg.style.top = `${-extra}px`;
      bg.style.bottom = `${-extra}px`;
    };

    const update = () => {
      frame = 0;
      if (reduce.matches) {
        bg.style.transform = '';
        return;
      }
      const rect = section.getBoundingClientRect();
      // セクションの中心が、画面の中心からどれだけ下にあるか
      const offset = rect.top + rect.height / 2 - window.innerHeight / 2;
      bg.style.transform = `translate3d(0, ${-offset * lag}px, 0)`;
    };

    // スクロールのたびではなく、次の描画の前に1回だけ計算する
    const onScroll = () => {
      if (frame === 0) frame = requestAnimationFrame(update);
    };
    const onResize = () => {
      resize();
      update();
    };

    onResize();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onResize);
    reduce.addEventListener('change', onResize);
    return () => {
      cancelAnimationFrame(frame);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onResize);
      reduce.removeEventListener('change', onResize);
    };
  }, [speed]);

  return (
    <section ref={sectionRef} className="parallax">
      <div ref={bgRef} className="parallax-bg" style={{ background }} aria-hidden="true" />
      <div className="parallax-content">{children}</div>
    </section>
  );
}

const stripes = 'repeating-linear-gradient(180deg, #00c8e8 0 40px, #eefafd 40px 80px)';

scrollY 0: セクション上端 640 / 背景の上端 160 / transform "translate3d(0px, -240px, 0px)" / top -240px bottom -240px
scrollY 160: セクション上端 480 / 背景の上端 80 / transform "translate3d(0px, -160px, 0px)" / top -240px bottom -240px
scrollY 320: セクション上端 320 / 背景の上端 0 / transform "translate3d(0px, -80px, 0px)" / top -240px bottom -240px
scrollY 480: セクション上端 160 / 背景の上端 -80 / transform "translate3d(0px, 0px, 0px)" / top -240px bottom -240px
scrollY 640: セクション上端 0 / 背景の上端 -160 / transform "translate3d(0px, 80px, 0px)" / top -240px bottom -240px
scrollY 800: セクション上端 -160 / 背景の上端 -240 / transform "translate3d(0px, 160px, 0px)" / top -240px bottom -240px
scrollY 960: セクション上端 -320 / 背景の上端 -320 / transform "translate3d(0px, 240px, 0px)" / top -240px bottom -240px

はみ出しあり: セクションの下 80px の列で 水色 40 画素 / 白 0 画素
はみ出しなし: セクションの下 80px の列で 水色 0 画素 / 白 80 画素

const [y, setY] = useState(0);

useEffect(() => {
  const onScroll = () => {
    const rect = sectionRef.current!.getBoundingClientRect();
    const offset = rect.top + rect.height / 2 - window.innerHeight / 2;
    setY(-offset * 0.5);
  };
  onScroll();
  window.addEventListener('scroll', onScroll, { passive: true });
  return () => window.removeEventListener('scroll', onScroll);
}, []);

ref で書き換える版: 表示の直後 1 回 → スクロール後 1 回（scroll イベント 20 回、scrollY 960）
state に入れる版: 表示の直後 2 回 → スクロール後 22 回（scroll イベント 20 回、scrollY 960）

js scrollY 320: セクション上端 320 / 背景の上端 320 / transform "" / translate none / top 0px
js scrollY 640: セクション上端 0 / 背景の上端 0 / transform "" / translate none / top 0px

<section className="parallax parallax-css">
  <div className="parallax-bg" style={{ background }} aria-hidden="true" />
  <div className="parallax-content">{children}</div>
</section>

.parallax-css {
  --h: 320px; /* セクションの高さと同じにする */
  view-timeline: --section block;
}
@supports (animation-timeline: view()) {
  .parallax-css .parallax-bg {
    top: calc((100vh + var(--h)) * -0.25);
    bottom: calc((100vh + var(--h)) * -0.25);
    animation: parallax linear both;
    animation-timeline: --section;
  }
}
@keyframes parallax {
  from { translate: 0 calc((100vh + var(--h)) * -0.25); }
  to { translate: 0 calc((100vh + var(--h)) * 0.25); }
}
@media (prefers-reduced-motion: reduce) {
  .parallax-css .parallax-bg { animation: none; inset: 0; }
}

scrollY 0: 背景の上端 160 / translate 0px -240px / top -240px bottom -240px
scrollY 160: 背景の上端 80 / translate 0px -160px / top -240px bottom -240px
scrollY 320: 背景の上端 0 / translate 0px -80px / top -240px bottom -240px
scrollY 480: 背景の上端 -80 / translate 0px 5.96856e-14px / top -240px bottom -240px
scrollY 640: 背景の上端 -160 / translate 0px 80px / top -240px bottom -240px
scrollY 800: 背景の上端 -240 / translate 0px 160px / top -240px bottom -240px
scrollY 960: 背景の上端 -320 / translate 0px 240px / top -240px bottom -240px