A simple hook for easily implementing Parallax.
import { useParallax } from 'react-parallax-hook';
const parallaxRef = useParallax();
return (
<>
<div ref={parallaxRef()} />
<img ref={parallaxRef({ multiplier: -120, from: 'top' })}>
</>
)
the parallaxRef method accepts these options:
{
multiplier?: number; // default: -60
from?: 'center' | 'top'; // default: 'center'
}
A single window.onScroll
event is used per component. Parallax values are only calculated for elements that are in view (according to IntersectionObserver). Every observer is destroyed when no longer in use.
- ✅ Use intersection observer to improve performance
- Typescript declarations
- Add
property
as an option