Well, I have to make a site like horizontal scroll with this , (the site I went through is just for example scrolling, not the effects) but I have no idea how to do it, I gave a good researched before asking the question here.
As I know it is not an easy subject to "help / teach" I would like you to help me with at least an idea how to do it. I have intermediate / advanced knowledge in html / css and js. But I've never done such a site.
I hope you will help me.
Thank you! I just got it!
body {
margin:0;
font-family:Georgia;
}
#container .box {
width:100vw;
height:100vh;
display:inline-block;
position:relative;
}
#container .box > div {
width:100px;
height:100px;
font-size:96px;
color:#FFF;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
line-height:.7;
font-weight:bold;
}
#container {
overflow-y:scroll;
overflow-x:hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color:#999;
position:absolute;
width:100vh;
height:100vw;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space:nowrap;
font-size:0;
}
.primeiro {
background-color: #45CCFF;
}
.segundo {
background-color: #49E83E;
}
.terceiro {
background-color: #EDDE05;
}
.quarto {
background-color: #E84B30;
}<div id="container">
<div id="container2">
<div class="box primeiro"><div>1</div></div>
<div class="box segundo"><div>2</div></div>
<div class="box terceiro"><div>3</div></div>
<div class="box quarto"><div>4</div></div>
</div>
</div>