ingrese la descripción de la imagen aquí
Me gustaría crear una página con un efecto similar al de la imagen gif publicada.
Hay dos secciones de la página, la primera es la sección horizontal, la segunda es la sección vertical.
cuando desplaza la rueda del mouse, la página se desplaza horizontalmente primero. luego se desplaza verticalmente después de llegar al final de la sección horizontal.
De alguna manera, tengo una idea de cómo debo establecer la altura de la sección horizontal y cuál es la proporción de traducción que debo aplicar en la sección horizontal, de modo que el último elemento de la sección horizontal pueda ocupar todo el espacio de la vista actual cuando se desplaza a una altura específica. Luego, puede comenzar a desplazarse verticalmente a la siguiente sección.
Traté de replicarlo. Aquí hay un enlace de lo que he hecho hasta ahora.
Gracias de antemano.
https://codepen.io/hongxuli/pen/eYRywRM
let slider = document.querySelector('.slider-inner') let sliderWidth = slider.getBoundingClientRect().width document.querySelector(".horizontal").style.height = `${ sliderWidth * window.innerHeight / window.innerWidth }px` function animate() { let y = window.scrollY let precent = y/sliderWidth // what this precent should be ? slider.style.transform = `translateX(-${precent*100}%)` requestAnimationFrame(animate) } animate() .horizontal{ position: relative; width: 100vw; //height -- what is the relationship of this height and total width of items } .slider-container{ position: sticky; top: 0; width: 100vw; overflow: hidden; } .slider-inner{ display: flex; width: 200vw; } .item{ position: relative; width: 100vw; height: 100vh ; background-color: red; border: solid 1px black; } .vertical{ width: 100vw; height: 100vh; background-color: aqua; } <div class="horizontal"> <div class="slider-container"> <div class="slider-inner"> <div class="item"></div> <div class="item"></div> </div> </div> </div> <div class="vertical"></div>