51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import * as React from "react";
|
|
import {useEffect, useRef, useState} from "react";
|
|
|
|
interface AnchoringProps {
|
|
text: string, // Default: Découvrez-en plus !
|
|
linkTo: string // Default: #main-page
|
|
}
|
|
|
|
export const Anchoring = ({ data }: { data: AnchoringProps }) => {
|
|
const [opacity, setOpacity] = useState(1);
|
|
const anchoringRef = useRef(null);
|
|
|
|
const handleScroll = () => {
|
|
const scrollTop = window.scrollY || window.pageYOffset;
|
|
const elementHeight = anchoringRef.current.clientHeight;
|
|
const newOpacity = (elementHeight - scrollTop) / elementHeight;
|
|
setOpacity(newOpacity);
|
|
};
|
|
|
|
useEffect(() => {
|
|
handleScroll(); // Initialize opacity on mount
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
const anchoringStyle = {
|
|
opacity: opacity,
|
|
transition: 'opacity 0.3s', // You can add a transition for a smooth effect
|
|
};
|
|
|
|
return (
|
|
<div className="mx-auto">
|
|
<div
|
|
className="anchoring"
|
|
ref={anchoringRef}
|
|
style={anchoringStyle}
|
|
>
|
|
<a href={`${ data.linkTo }`}>
|
|
<h1>{ data.text }</h1>
|
|
<img
|
|
src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjI1OCAxNi4yNDItNi02YTEuMDUgMS4wNSAwIDEgMSAxLjQ4NC0xLjQ4NEwxMiAxNC4wMTVsNS4yNTgtNS4yNTdhMS4wNSAxLjA1IDAgMSAxIDEuNDg0IDEuNDg0bC02IDZhMS4wNSAxLjA1IDAgMCAxLTEuNDg0IDBaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg=="/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|