.elementor-13517 .elementor-element.elementor-element-f5a372d{--display:flex}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Scroll Animation</title><style>*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;overflow-x:hidden;background:#fff}.hero-section{height:100vh;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}.hero-section h1{font-size:80px;font-weight:300;line-height:1}.hero-section p{margin-bottom:20px;letter-spacing:5px;opacity:.7}.scroll-animation-section{position:relative;background:#f7f7f5;padding:100px 0}.scroll-wrapper{width:100%;max-width:1400px;margin:auto;padding:0 40px;display:flex;justify-content:space-between;gap:80px}.scroll-content{width:45%}.scroll-item{min-height:100vh;display:flex;align-items:center;opacity:.2;transform:translateY(80px);transition:.7s ease}.scroll-item.active{opacity:1;transform:translateY(0)}.scroll-item small{display:block;margin-bottom:20px;color:#777;letter-spacing:4px}.scroll-item h2{font-size:72px;line-height:1;font-weight:300;margin-bottom:30px}.scroll-item p{max-width:500px;font-size:18px;line-height:1.8;color:#666}.scroll-image-area{width:50%;position:sticky;top:40px;height:88vh}.image-wrapper{width:100%;height:100%;position:relative;overflow:hidden;border-radius:30px;box-shadow:0 20px 50px rgb(0 0 0 / .15)}.image-wrapper img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.08);transition:all .8s ease}.image-wrapper img.active{opacity:1;transform:scale(1)}.overlay{position:absolute;inset:0;background:rgb(0 0 0 / .08)}.end-section{height:100vh;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px}.end-section h2{font-size:60px;font-weight:300;margin-bottom:20px}.end-section p{max-width:700px;margin:auto;font-size:18px;line-height:1.8;opacity:.7}@media(max-width:991px){body{background:#f7f7f5}.hero-section{height:70vh;padding:40px 20px}.hero-section h1{font-size:42px;line-height:1.1}.hero-section p{font-size:12px;letter-spacing:3px}.scroll-animation-section{padding:40px 0 80px}.scroll-wrapper{flex-direction:column;padding:0 16px;gap:20px}.scroll-content,.scroll-image-area{width:100%}.scroll-image-area{position:sticky;top:10px;height:240px;z-index:20}.image-wrapper{border-radius:24px}.scroll-item{min-height:65vh;align-items:flex-end;padding-bottom:40px;opacity:.25;transform:translateY(40px)}.scroll-item.active{opacity:1;transform:translateY(0)}.scroll-item>div{background:#fff;padding:28px 22px;border-radius:24px;box-shadow:0 10px 30px rgb(0 0 0 / .06);width:100%}.scroll-item small{margin-bottom:14px;font-size:11px;letter-spacing:3px}.scroll-item h2{font-size:36px;line-height:1.05;margin-bottom:18px}.scroll-item p{font-size:14px;line-height:1.7}.end-section{height:70vh;padding:40px 20px}.end-section h2{font-size:34px;line-height:1.1}.end-section p{font-size:14px;line-height:1.8}}</style></head><body><section class="hero-section"><div><p>SCROLL DOWN</p><h1>Scroll Driven<br>Image Animation</h1></div></section><section class="scroll-animation-section"><div class="scroll-wrapper"><div class="scroll-content"><div class="scroll-item active"><div><small>01</small><h2>Exotic Wood</h2></div></div><div class="scroll-item"><div><small>02</small><h2>Soft Wood</h2></div></div><div class="scroll-item"><div><small>03</small><h2>Teak Collection</h2></div></div><div class="scroll-item"><div><small>04</small><h2>Engineered Panels</h2></div></div></div><div class="scroll-image-area"><div class="image-wrapper"><img class="active" src="https://images.unsplash.com/photo-1513694203232-719a280e022f?q=80&w=1200&auto=format&fit=crop"><img src="https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1200&auto=format&fit=crop"><img src="https://images.unsplash.com/photo-1494526585095-c41746248156?q=80&w=1200&auto=format&fit=crop"><img src="https://images.unsplash.com/photo-1484154218962-a197022b5858?q=80&w=1200&auto=format&fit=crop"><div class="overlay"></div></div></div></div></section><section class="end-section"><div><h2>Premium Scroll Experience</h2><p>The image changes automatically while scrolling just like your reference website.</p></div></section><script>const scrollItems=document.querySelectorAll('.scroll-item');const images=document.querySelectorAll('.image-wrapper img');function updateSections(){scrollItems.forEach((item,index)=>{const rect=item.getBoundingClientRect();if(rect.top <=window.innerHeight * .45 && rect.bottom>=window.innerHeight * .45){scrollItems.forEach((el)=>{el.classList.remove('active')});images.forEach((img)=>{img.classList.remove('active')});item.classList.add('active');if(images[index]){images[index].classList.add('active')}}})}window.addEventListener('scroll',updateSections);window.addEventListener('load',updateSections);</script><!--=======================================--><!-- MOBILE ONLY PREMIUM ANIMATION SECTION --><!--=======================================--><section class="mobile-scroll-cards"><div class="mobile-sticky-image"><img class="mobile-image active" src="https://images.unsplash.com/photo-1513694203232-719a280e022f?q=80&w=1200&auto=format&fit=crop"><img class="mobile-image" src="https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?q=80&w=1200&auto=format&fit=crop"><img class="mobile-image" src="https://images.unsplash.com/photo-1494526585095-c41746248156?q=80&w=1200&auto=format&fit=crop"><img class="mobile-image" src="https://images.unsplash.com/photo-1484154218962-a197022b5858?q=80&w=1200&auto=format&fit=crop"><div class="mobile-image-overlay"></div></div><div class="mobile-card-track"><div class="mobile-card active"><div class="mobile-card-content"><span>01</span><h3>Exotic Wood</h3></div></div><div class="mobile-card"><div class="mobile-card-content"><span>02</span><h3>Soft Wood</h3></div></div><div class="mobile-card"><div class="mobile-card-content"><span>03</span><h3>Teak Collection</h3></div></div><div class="mobile-card"><div class="mobile-card-content"><span>04</span><h3>Engineered Panels</h3></div></div></div><div class="mobile-nav-arrows"><div class="mobile-nav-arrow">←</div><div class="mobile-nav-arrow">→</div></div></section><style>.mobile-scroll-cards{display:none}@media(max-width:767px){.hero-section,.scroll-animation-section,.end-section{display:none}.mobile-scroll-cards{display:block;position:relative;background:#f5f2ee;overflow:hidden}.mobile-sticky-image{position:sticky;top:0;height:100vh;border-radius:0;overflow:hidden;z-index:1;margin-bottom:0;box-shadow:none}.mobile-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:all 1s cubic-bezier(.22,.61,.36,1)}.mobile-image.active{opacity:1;transform:scale(1)}.mobile-image-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgb(0 0 0 / .15),rgb(0 0 0 / .45))}.mobile-card-track{position:absolute;inset:0;z-index:5;padding:0 20px}.mobile-card{height:100vh;position:relative;opacity:.15;transform:translateY(80px);transition:all .8s cubic-bezier(.22,.61,.36,1);opacity:.15;transform:translateY(80px);transition:all .8s cubic-bezier(.22,.61,.36,1)}.mobile-card.active{opacity:1;transform:translateY(0)}.mobile-card span{color:rgb(255 255 255 / .7);font-size:11px;letter-spacing:4px;margin-bottom:16px}.mobile-card h3{color:#fff;font-size:48px;line-height:.95;font-weight:300;margin-bottom:20px;width:260px;max-width:260px;min-width:260px}.mobile-card span,.mobile-card h3,.mobile-card p{width:100%}.mobile-card-content{position:absolute;left:20px;right:20px;bottom:110px;width:auto;max-width:320px;height:120px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}.mobile-card span{position:absolute;top:0;left:0;height:20px;font-size:11px;letter-spacing:4px;margin:0}.mobile-card h3{position:absolute;top:36px;left:0;width:260px;height:70px;margin:0;display:block}.mobile-card p{position:absolute;top:148px;left:0;width:320px;height:90px;margin:0;display:block}.mobile-nav-arrows{position:fixed;bottom:28px;left:0;width:100%;display:flex;justify-content:space-between;padding:0 20px;z-index:50;pointer-events:none}.mobile-nav-arrow{pointer-events:auto;cursor:pointer;width:48px;height:48px;border-radius:50%;background:rgb(255 255 255 / .14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgb(255 255 255 / .18);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;font-weight:300;box-shadow:0 10px 25px rgb(0 0 0 / .18)}}</style><script>const mobileCards=document.querySelectorAll('.mobile-card');const mobileImages=document.querySelectorAll('.mobile-image');function updateMobileCards(){mobileCards.forEach((card,index)=>{const rect=card.getBoundingClientRect();if(rect.top <=window.innerHeight * .55 && rect.bottom>=window.innerHeight * .55){mobileCards.forEach((item)=>{item.classList.remove('active')});mobileImages.forEach((img)=>{img.classList.remove('active')});card.classList.add('active');if(mobileImages[index]){mobileImages[index].classList.add('active')}}})}window.addEventListener('scroll',updateMobileCards);window.addEventListener('load',updateMobileCards);const prevButton=document.querySelector('.mobile-nav-arrow:first-child');const nextButton=document.querySelector('.mobile-nav-arrow:last-child');let currentMobileIndex=0;function activateMobileSlide(index){if(index < 0) index=0;if(index>=mobileCards.length) index=mobileCards.length - 1;currentMobileIndex=index;mobileCards.forEach((card)=>{card.classList.remove('active')});mobileImages.forEach((img)=>{img.classList.remove('active')});mobileCards[index].classList.add('active');mobileImages[index].classList.add('active');mobileCards[index].scrollIntoView({behavior:'smooth',block:'start'})}if(prevButton){prevButton.addEventListener('click',()=>{activateMobileSlide(currentMobileIndex - 1)})}if(nextButton){nextButton.addEventListener('click',()=>{activateMobileSlide(currentMobileIndex+1)})}window.addEventListener('scroll',()=>{mobileCards.forEach((card,index)=>{const rect=card.getBoundingClientRect();if(rect.top <=window.innerHeight * .55 && rect.bottom>=window.innerHeight * .55){currentMobileIndex=index}})});</script></body></html>