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);
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);
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
