Parallax Section
A scroll-driven parallax effect that moves content at different speeds.
Parallax Section
A section where background and foreground elements move at different speeds while scrolling, creating a depth illusion.
Animation Process
The parallax effect uses transform: translateY() driven by the scroll position via a scroll event listener or useScroll hook.
"use client";
import { useEffect, useRef } from "react";
export function ParallaxSection() {
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleScroll = () => {
const el = ref.current;
if (!el) return;
const rect = el.getBoundingClientRect();
const scrolled = window.scrollY;
const rate = rect.top / window.innerHeight;
el.style.transform = `translateY(${scrolled * rate * 0.3}px)`;
};
window.addEventListener("scroll", handleScroll, { passive: true });
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
<div ref={ref} className="relative h-screen overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-b from-transparent to-black" />
<div className="relative z-10 flex items-center justify-center h-full">
<h1>Parallax Content</h1>
</div>
</div>
);
}Key steps:
- Calculate how far the element is from the viewport top
- Apply a
translateYtransform based on scroll position - Use
passive: truefor smooth performance - Multiply by a rate factor to control parallax speed
Source Code
View the full implementation on GitHub.