Scroll Triggered Blend
Scroll the page to see the blend mode change
Learn how to change blend modes dynamically based on scroll position for engaging scroll effects.
const [scrollProgress, setScrollProgress] = useState(0);
useEffect(() => {
const handleScroll = () => {
const progress = window.scrollY / documentHeight;
setScrollProgress(progress);
};
window.addEventListener('scroll', handleScroll);
}, []);
<div style={{ mixBlendMode: blendModes[progress] }} />Scroll the page to see the blend mode change