Я пытаюсь создать веб-сайт с прокруткой на одну страницу, который привязывается к каждому разделу события колеса. первый раздел будет видео, и при первой прокрутке видео будет go вверх, а сервисный раздел будет скользить в окно, в сервисном разделе следующие три движения колеса изменят изображение и текст, которые мы видим в окне, анимация в этом разделе будет похожа на анимацию слайдов на веб-сайте https://district2.studio/, и после третьего слайда в разделе услуг следующие разделы будут скользить снизу и видимый раздел будет скользить вверх за пределы окна, последний свиток будет перемещать раздел только на% за пределы окна наверх, чтобы показать нижний колонтитул в задней части окна. Но похоже, что javascript не выполняет событие с одним колесом, пожалуйста, помогите мне найти эту проблему, и если есть какие-то способы, которыми я могу сделать код короче, используя функции javascript, о которых я не знаю. (если у вас есть более короткий и лучший способ представить это в jquery, пожалуйста, покажите, но, пожалуйста, объясните это, потому что я вообще не имею понятия о jquery)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
user-select: none;
}
#first-section {
position: absolute;
top: 0;
right: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: black;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
#services, #about-us, #products-store {
position: absolute;
top: 100vh;
right: 0;
left: 0;
width: 100vw;
height: 100vh;
}
#arch {
background-color: red;
z-index: 1;
}
#interior {
background-color: green;
z-index: -1;
}
#product {
background-color: blue;
z-index: -1;
}
#about-us {
background-color: yellow;
}
#products-store {
background-color: deeppink;
}
#footer {
position: absolute;
top: 33vh;
right: 0;
left: 0;
width: 100%;
height: 67vh;
background-color: black;
z-index: -1;
}
#call-to-action-footer {
position: absolute;
top: -16vh;
left: 16vh;
right: 16vh;
width: auto;
height: 50vh;
background-color: red;
}
</style>
<script>
window.addEventListener("wheel", event => {
const delta = Math.sign(event.deltaY);
console.info(delta);
if (delta > 0) {
if (document.getElementById("services").style.top == "100vh") {
document.getElementById("first-section").style.top = "-100vh";
document.getElementById("services").style.top = "0px";
}
else if (document.getElementById("services").style.top == "0px") {
if (document.getElementById("arch").style.zIndex == "1") {
document.getElementById("interior").style.zIndex = "2";
}
else if (document.getElementById("interior").style.zIndex == "2") {
document.getElementById("product").style.zIndex = "3";
}
else if (document.getElementById("product").style.zIndex == "3") {
document.getElementById("services").style.top = "-100vh";
document.getElementById("about-us").style.top = "0px";
}
}
else if (document.getElementById("products-store").style.top == "100vh") {
document.getElementById("about-us").style.top = "-100vh";
document.getElementById("products-store").style.top = "0px";
}
else if (document.getElementById("products-store").style.top == "0px") {
document.getElementById("products-store").style.top = "-67vh";
}
}
else if (delta < 0) {
if (document.getElementById("products-store").style.top == "-67vh") {
document.getElementById("products-store").style.top = "0px";
}
else if (document.getElementById("about-us").style.top == "-100vh") {
document.getElementById("about-us").style.top = "0px";
document.getElementById("products-store").style.top = "100vh";
}
else if (document.getElementById("services").style.top == "-100vh") {
document.getElementById("services").style.top = "0px";
}
else if (document.getElementById("services").style.top == "0px") {
if (document.getElementById("product").style.zIndex == "3") {
document.getElementById("product").style.zIndex == "-1";
}
else if (document.getElementById("interior").style.zIndex == "2") {
document.getElementById("interior").style.zIndex = "-1";
}
else if (document.getElementById("arch").style.zIndex == "1") {
document.getElementById("services").style.top = "100vh";
}
}
}
});
</script>
</head>
<body>
<main>
<section id="first-section">
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>
</section>
<section id="services">
<div id="arch">
<div id="arch-categories">
<div id="arch-residencial"></div>
<div id="arch-commercial"></div>
<div id="arch-hospitality"></div>
</div>
</div>
<div id="interior">
<div id="interior-categories">
<div id="interior-residencial"></div>
<div id="interior-commercial"></div>
<div id="interior-hospitality"></div>
</div>
</div>
<div id="product">
<div id="product-categories">
<div id="category-1"></div>
<div id="category-2"></div>
<div id="category-3"></div>
</div>
</div>
</section>
<section id="about-us">
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section id="products-store"></section>
<footer id="footer">
<div id="call-to-action-footer"></div>
</footer>
</main>
</body>
</html>