Parallax Scroll

보통

스크롤 시 레이어마다 다른 속도로 움직이는 패럴랙스 효과

#scroll#parallax#depth

라이브 데모

Background Layer

Middle Layer

Foreground Layer

코드

ParallaxScroll.tsx

export const ParallaxScroll = () => {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => {
      if (containerRef.current) {
        setScrollY(containerRef.current.scrollTop);
      }
    };

    container?.addEventListener('scroll', handleScroll);
    return () => container?.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div className="parallax-scroll-container" ref={containerRef}>
      <div style={{ transform: `translateY(${scrollY * 0.5}px)` }}>
        Background Layer
      </div>
      <div style={{ transform: `translateY(${scrollY * 0.25}px)` }}>
        Middle Layer
      </div>
      <div>Foreground Layer</div>
    </div>
  );
};