I am new to web development and I have been working on creating a portfolio website to learn. I have seen some websites with really cool effects on their landing pages and I would like to incorporate something similar into my site.
Specifically, I am interested in creating a "sliding door" effect. Instead of the page scrolling when the site loads, I want two divs to slide apart, revealing the content inside. I have somewhat achieved this, but I can't seem to make the content on the page remain static while the user scrolls to open the doors.
I have been trying to figure this out with JavaScript, but I haven't been able to find helpful resources online in a beginner-friendly format. I have created a demo of my progress in this jsfiddle since I couldn't figure out snippets. Here is also the JavaScript code I have been using:
window.addEventListener("scroll", handleScroll, {
passive: false
});
let scrollPosition = 0;
const topCover = document.getElementById("top-cover");
const bottomCover = document.getElementById("bottom-cover");
function handleScroll(e) {
e.preventDefault();
scrollPosition = window.scrollY;
const maxScroll = window.innerHeight / 2;
if (scrollPosition < 0) scrollPosition = 0;
topCover.style.transform = `translateY(-${scrollPosition}px)`;
bottomCover.style.transform = `translateY(${scrollPosition}px)`;
if (scrollPosition >= maxScroll) {
cover.style.display = "none";
window.removeEventListener('scroll', handleScroll)
}
}
The two doors are the topCover and bottomCover divs, and they reveal upon scrolling down.
The issue I am facing is that the background content still scrolls, so the user would need to scroll back up to access the content after the doors disappear. I have tried using the wheel event instead, which prevents the background from scrolling, but it causes choppy animation when scrolling with the mouse wheel. Additionally, the wheel event doesn't account for scrolling with gestures or scrollbar movements, making it not ideal for my project.
Any assistance on how to resolve this problem would be greatly appreciated. I would prefer to stick to using vanilla JavaScript and CSS for this if possible.