I would like to create a page with a similar effect like the gif pic posted.
There are two sections of the page, first one is horizontal section, second one is verical section.
when you scrolling the mouse wheel, the page scroll horizontally first. then it scrolls vertically after it reaches the bottom of the horizontal section.
Somehow, I have on idea how should I set the height of the horizontal section and what is the ratio of trasnlate I should apply on the horizontal section, so that the last element in the horizontal section could take entire space of current view when you scroll to a specific height. Then, you can start scroll vertically to the next section.
I tried to replicate it. Here is link of what I have done so far.
Thank you in advance.
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>