스크롤 이벤트

window.scrollY
window.pageYoffset

방법1

useState로 window.scrollY 값의 변화를 저장
useEffect를 사용하여 window에 scroll 이벤트를 등록하고 unmount 시점에 이벤트 해지
주요 style 프로퍼티
- backgroundPositionY
- transfrom: translateX(), translateY()
- opacity

import { useEffect, useState } from "react";
import item1 from "../images/item1.png";
import item2 from "../images/item2.png";

export default function Parallax() {
  const [position, setPosition] = useState(0);

  function onScroll() {
    setPosition(window.scrollY);
  }

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

  return (
    <div className="wrapper">
      <div
        className="bg bg1"
        style={{
          backgroundPositionY: position / 2,
        }}
      >
        <div>Welcome</div>
      </div>
      <div
        className="bg bg2"
        style={{
          backgroundPositionY: position / -3,
        }}
      >
        <div>Happy New Year</div>
      </div>
      <p
        className="desc"
        style={{
          transform: `translateX(${-position}px)`,
        }}
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p
        className="desc2"
        style={{
          transform: `translateX(${position}px)`,
        }}
      >
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
        dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p
        className="desc3"
        style={{
          opacity: (position - 700) / 50,
        }}
      >
        Duis aute irure dolor
      </p>
      <p
        className="desc3"
        style={{
          opacity: (position - 830) / 50,
        }}
      >
        Lorem ipsum dolor sit amet
      </p>
      <p
        className="desc3"
        style={{
          opacity: (position - 960) / 50,
        }}
      >
        Excepteur sint occaecat
      </p>
      <p
        className="desc3"
        style={{
          opacity: (position - 1090) / 50,
        }}
      >
        sunt in culpa qui officia deserunt
      </p>
      <img
        src={item1}
        className="item"
        alt=""
        style={{
          transform: `translateY(${position / 2}px)`,
        }}
      />
      <img
        src={item2}
        className="item item_snow"
        alt=""
        style={{
          transform: `translateY(${position / 4}px)`,
        }}
      />
    </div>
  );
}

방법2

function App() {
  const [offsetY, setOffsetY] = useState(0);
  const handleScroll = () => setOffsetY(window.pageYOffset);

  useEffect(() => {
    window.addEventListener("scroll", handleScroll);

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

  const renderContent = () => (
    <>
      <div className="Parallax__content__heading">
        <h1 className="Parallax__content__heading__text">Closure</h1>
        <h2 className="Parallax__content__heading__caption">
          Your one-stop source of Web Development tricks
        </h2>
      </div>
      <div className="Parallax__content__cta">
                Your one-stop source of Web Development tricks
      </div>
    </>
  );

  return (
    <section className="Parallax">
      <div
        className="Parallax__background"
        style={{ transform: `translateY(-${offsetY * 0.5}px)` }}
      />
      <div
        className="Parallax__background-triangles"
        style={{ transform: `translateY(${offsetY * 0.8}px)` }}
      />
      <div className="Parallax__content">{renderContent()}</div>
    </section>
  );
}

참조링크