Parallax Calculator

Example Calculations (at 500px scroll)

import { useEffect, useRef } from 'react';

export default function ParallaxContainer({ children }) {
  const containerRef = useRef(null);
  const layerRefs = useRef([]);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const handleScroll = () => {
      const scrollY = container.scrollTop;
      const layers = [
        {
          ref: layerRefs.current[0],
          speed: 0.3,
          distance: 3
        },
        {
          ref: layerRefs.current[1],
          speed: 0.6,
          distance: 2
        },
        {
          ref: layerRefs.current[2],
          speed: 1,
          distance: 1
        }
      ];

      layers.forEach(layer => {
        if (layer.ref) {
          const translateY = scrollY * layer.speed * 1;
          const scale = 1 - (layer.distance * 0.1) / 1000;

          layer.ref.style.transform = `
            translateY(${translateY}px)
            translateZ(${-layer.distance * 100}px)
            scale(${Math.max(0.5, Math.min(1.5, scale))})
          `;
        }
      });
    };

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

  return (
    <div
      ref={containerRef}
      style={{
        height: '100vh',
        overflowX: 'hidden',
        overflowY: 'scroll',
        perspective: '1000px'
      }}
    >
      <div
        ref={el => layerRefs.current[0] = el}
        className="parallax-layer-bg"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          zIndex: 7
        }}
      >
        {/* Layer Background content */}
      </div>
      <div
        ref={el => layerRefs.current[1] = el}
        className="parallax-layer-mid"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          zIndex: 8
        }}
      >
        {/* Layer Middle content */}
      </div>
      <div
        ref={el => layerRefs.current[2] = el}
        className="parallax-layer-fg"
        style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          zIndex: 9
        }}
      >
        {/* Layer Foreground content */}
      </div>
      {children}
    </div>
  );
}

Parallax Presets