ram
KPCKevin Powell - Community
•Created by ram on 10/16/2023 in #front-end
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);
1 replies
KPCKevin Powell - Community
•Created by ram on 5/11/2023 in #os-and-tools
Installing Support Board on a Digital Ocean Droplet
I was tasked with installing Support Board on a Digital Ocean Droplet, however, I have no experience with SSH, what are the steps that I can take so that I can have some sort of progress?
1 replies