Recreating Polestar website's zooming in video on scroll

Hi all, I'm trying to recreate polestar website's zooming in video on scroll in an Elementor page, so far I am able to scale the video to fit the device height and width but I am not really able to implement like a long scrolling distance so when the section enters the viewport, the users will have to scroll for quite a lot before being able to leave the viewport and then the video returns to its original state This is the current code I have tried // Select the target section you want to check // This is the actual section from Elementor which I put a custom class in const sectionToCheck = document.getElementById('zoom-video-section'); // The actual video element from elementor which I put a custom class in const zoomVideoContainer = document.getElementById('zoom-video-actual'); const zoomVideo = document.querySelector('.elementor-widget-video .e-hosted-video .elementor-video'); const zoomVideoAnotherContainer = document.querySelector('.elementor-widget-video .elementor-widget-container'); // Function to check if the section is in the viewport const isSectionInViewport = (section) => { const rect = section.getBoundingClientRect(); return ( rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2 ); }; // Function to update the section's class based on its position const updateSectionClass = () => { if (isSectionInViewport(zoomVideoAnotherContainer)) { sectionToCheck.style.width = "100%"; sectionToCheck.style.height = "100vh"; sectionToCheck.style.transition = "all 0.5s"; sectionToCheck.style.padding = "0"; zoomVideo.style.transition = "all 0.5s"; zoomVideo.style.height = "100vh"; zoomVideo.play(); } else { sectionToCheck.style.height = "100%"; sectionToCheck.style.padding = "5%"; zoomVideo.style.height = "100%"; zoomVideo.pause(); } }; // Initial check updateSectionClass(); // Check on scroll window.addEventListener('scroll', updateSectionClass);
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server