35 lines
856 B
TypeScript
35 lines
856 B
TypeScript
|
import { useEffect, useRef } from 'react';
|
||
|
|
|
||
|
|
export function useParallax<T extends HTMLElement>(speed: number = 0.15) {
|
||
|
|
const ref = useRef<T>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const el = ref.current;
|
||
|
|
if (!el) return;
|
||
|
|
|
||
|
|
let rafId: number;
|
||
|
|
let ticking = false;
|
||
|
|
|
||
|
|
const update = () => {
|
||
|
|
el.style.transform = `translateY(${window.scrollY * speed}px)`;
|
||
|
|
ticking = false;
|
||
|
|
};
|
||
|
|
|
||
|
|
const onScroll = () => {
|
||
|
|
if (!ticking) {
|
||
|
|
rafId = requestAnimationFrame(update);
|
||
|
|
ticking = true;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
window.removeEventListener('scroll', onScroll);
|
||
|
|
cancelAnimationFrame(rafId);
|
||
|
|
};
|
||
|
|
}, [speed]);
|
||
|
|
|
||
|
|
return ref;
|
||
|
|
}
|