36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
|
|
export const useOceanDepthEffect = () => {
|
|
const [scrollDepth, setScrollDepth] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
const scrollPosition = window.scrollY;
|
|
const documentHeight = document.documentElement.scrollHeight - window.innerHeight;
|
|
|
|
if (documentHeight <= 0) {
|
|
setScrollDepth(0);
|
|
return;
|
|
}
|
|
|
|
// Calcul de la profondeur avec courbe d'accélération naturelle
|
|
const rawPercentage = Math.min(scrollPosition / documentHeight, 1);
|
|
|
|
// Courbe d'easing pour un effet plus naturel de descente océanique
|
|
// Plus on descend, plus l'assombrissement s'accélère (comme dans l'océan réel)
|
|
const easedDepth = rawPercentage < 0.5
|
|
? 2 * rawPercentage * rawPercentage
|
|
: 1 - Math.pow(-2 * rawPercentage + 2, 3) / 2;
|
|
|
|
setScrollDepth(Math.min(easedDepth, 1));
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll, { passive: true });
|
|
handleScroll(); // Initial call
|
|
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
}, []);
|
|
|
|
return scrollDepth;
|
|
};
|