Pure CSS Horizontal Website Tutorial for Beginners

Very practical and easy to apply. Thank you very much!!!

Thank you!

In this content how to add a menu ?

Amazing tutorial!! Thanks~

the tutorial is very good, but I had a question: what if I want to scroll a section horizontally and another section vertically within the same page, how would I control it?

Thank you so much !

You are the man! TY.

Broo you are amazing

Can i get any JS value of scrolling with this. i want to make my site parallax (when i scroll an element is moving) window.scrollY and window.scrollX is not working. Pls help

This channel is SERIOUSLY underrated!!

hello does scroll work for cellphones or table device?

omg it worked perfectly thank you soooo much for this simple yet amazing tutorial!!

What if u dont want exactly 400vw in width is there any way to make it adapt?

Awesome!! Thank you

thanks for the awesome tutorial
but it is broken on mobile, you can fix it by the following code:


@media (max-width: 888px) {
.outer-wrapper {
transform: rotate(0) translateX(0);
transform-origin: top left;
overflow-y: hidden;
overflow-x: scroll;
position: absolute;
width: 100vw;
height: 100vh;
}

.wrapper {
display: flex;
flex-direction: row;
height: 400vw;
transform: rotate(0) translateY(0);
transform-origin: top left;
}

.slide {
width: 100vw;
height: 100vh;
background: transparent;
border: black solid 3px;
}
}

wow, thanks a lot!

Is there any solution to the problem that this way of horizontal scrolling is impeded by Mozilla Firefoxe's apparent misinterpretation of the two-finger scrolling gesture (on Trackpad) on MacOS? Thanks for the video!

I think this video is great but I’m having a hard time figuring out how i can transitions back to scrolling up and down instead of side to side i thought i could just create another div right underneath the outterwrapper but unfortunately it’s not that easy if anyone has any suggestions that would be great.

shit man this was taking too much of my time(bcz i am not good in css) bro tried bunch of things like parallax-scrolling and stuff but you got the right things

Thank you

Your content is a masterpiece Keep going ♥👏✨

This was an INCREDIBLE tutorial thank you!

Crazy man, great guide and excellent result with simple HTML5 and CSS
Pura vida!

Please tell me horizontal scrolling does not work on android but on PC and on ios everything is ok

I used this as the layout for my landing page but I can’t get text or images over the background images? How do i put text and images over the slides?

WoW,, I've just watched very first 10 seconds of this tutorial where you explained that such a effect is easily doable by rotating one element and then another one and I'm stunned. Idk but that's ingenious. I will add this video to my favourite so that I can go sleep and watch it tomorrow cuz I feel as if I was Outshone by you right now. Good job! c:

ty so much <3

Thanks bro.

How to add event scroll to trigger the animation script?

Great Tutorial, can u help me? how to do this with an Avada container which has 4 columns?

Big thanks, I love this tutorial. Keep up the good work!!!

what is in the top of style sheet

there may be some people for whom this code might not work and if you ask me this code should not work for anyone at all but anyways if you are one of those people you might wanna try this code that I have stated belove it worked for me and should work for you as well
the HTML is good and should not be changed but for the css replace you code with mine
body{
margin: 0px;
}
.outer-wrapper{
border:2px solid black;
width: 100vh;
height: 100vw;
transform:rotate(-90deg) translateX(-100vh);
transform-origin:top left;
overflow-y:scroll;
overflow-x: hidden;
position: absolute;
}
.wrapper{
width: 400vw;
display: flex;
flex-direction:row;
transform:rotate(90deg) translateX(-100vh) ;
transform-origin:bottom left;
}
.slide{
width: 100vw;
height: 100vh;
}
.one{
background-color:green;
}
.two{
background-color:red;
}
.three{
background-color:yellow;
}
.four{
background-color:blue;
}
::-webkit-scrollbar{
display: none;
}

I spotted a bug with firefox on mac, if you use the mousewheel it works fine, but if you use the trackpad it scrolls very slow it does not seem to work very well with the combination firefox + trackpad. Any solution for this?

Thank you soooo much! May I ask if there is another tutorial to make the horizontal parallax effect like the first example in this video? I tried with Stellar.js, but it doesn't with this scrolling tutorial together, thank you so much again!

wow amazing!

Great and simple explanation. Awesome ! Thanks to sharing!

Awesome is there any possible way to make the scrollbar on the bottom

Nice work

Thanks a lot!!! This was just perfect

thank you! help a lot

How would i add a cityscape image to this? it is a vector image saved as an SVG.

awesome!

Thank you, this tutorial is awesome!

Hello, it worked perfectly, but how to add smooth scrolling effect? Thanks

Fucking golden man. Much love.

thankyou my brother

Excellent!, it worked perfectly, thank you so much!.

This was so so cool. Thanks.

super awesome, short, and informative video. I got it to work on chrome but I have a lot of white space on the top? When my file loads it goes directly into horizontal scroll but occasionally it'll scroll up(where that white space is?