platform-admin/alva
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Slow fade for heritage image

Browse Source 
Adjusts scroll fade-in: lighter observer, longer duration and greater offset to ensure the first image in HeritageSection fades in more smoothly as user scrolls.

X-Lovable-Edit-ID: edt-7c235c27-a2ad-44b8-81be-b6d7726cd2d2
This commit is contained in:
gpt-engineer-app[bot]
2026-01-27 20:43:31 +00:00
parent c140eac8e8 c8ccf0b65f
commit 7d7c4c9e1e
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/HeritageSection.tsx
+4 -4
View File
@@ -30,8 +30,8 @@ const HeritageSection = () => {
useEffect(() => { useEffect(() => {
const observerOptions = { const observerOptions = {
threshold: 0.2, threshold: 0.1,
rootMargin: "0px 0px -50px 0px", rootMargin: "0px 0px -100px 0px",
}; };
const heroObserver = new IntersectionObserver((entries) => { const heroObserver = new IntersectionObserver((entries) => {
@@ -65,10 +65,10 @@ const HeritageSection = () => {
{/* Heritage Hero */} {/* Heritage Hero */}
<div <div
ref={heroRef} ref={heroRef}
className={`transition-all duration-1000 ease-out ${ className={`transition-all duration-[1500ms] ease-out ${
heroVisible heroVisible
? "opacity-100 translate-y-0" ? "opacity-100 translate-y-0"
: "opacity-0 translate-y-12" : "opacity-0 translate-y-16"
}`} }`}
> >
{/* Image */} {/* Image */}