JavaScript: Implementing Horizontal and Vertical Scrolling on a Single Webpage
ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- Hi guys.
Back with another video where we will be implementing vertical and horizontal scrolling on a single webpage.
We will be using the CSS sticky positioning attribute and Vanilla JavaScript to achieve this effect.
Please like the video and subscribe if you want to see more tutorials like this!
Thanks all!
Conor
![โรงเรียนตอนตี 2 โคตรหลอน..!! [โรงเรียนไดเม่]](http://i.ytimg.com/vi/2MAEMwqVYh8/mqdefault.jpg)
King of advanced front-ends ✌🏽😁
Thanks a lot!!! 👍👍👍
Very cool video.
You told everything very detailed and clear!!!
------------------------------ This is awesome! Thank You! ------------------------------
To go with this, I am going to try to create a persistent sidebar (left, or right) that users can mouse over to go back to vertical scrolling no matter what their position in the horizontal scrolling area. Like a sidebar on the left that as you scroll down the page, it has images and project titles, on the bar. Then, use a scroll snap to snap to each project when centered on the project image and title on the bar. When you hit that point, the horizontal scroll kicks in to display all the project images. When the project images end, the vertical scrolling kicks back in, just like this video shows. At any position, the user can go back to the sidebar to enable the vertical scrolling again.
I have the code for all of that. But, combining it with this code here is going to be a bi0tch. If I can accomplish this, it will be my dream portfolio for my architectural work.
Super helpful
Love the fact that you explained it so well❤
Amazing!!! I’ve been waiting for this for a long time. Thank you for sharing 🥰
Thanks mate! Glad you find it useful 👍🤩
@@ConorBailey Hi. Can you make tutorial of this? - - - - -> Image Grid on Scroll - Bricksbuilder - Bricksforge - GSAP - - - - -> this is the name of the video on TH-cam because TH-cam itself removes the link.
Thanks a ton Conor
Very elegant, going to use this !
Thank you so much for this video and your whole channel! it was very helpful
This is very creative. Clear tutorial.
Was looking for this for months... thanks, great tutorial
Glad it was helpful!
Thank you. I needed this.
This is awesome! Thanks Conor!
Thank you sir, i really appreciate your tutorial
can you please provide the code as well
Thank you very much keep up the great work
Awesome! Thank you bro! Please more videos like these :)
More to come!
@@ConorBailey
.sticky__parent {
height: 500vh;
}
.scroll__section {
width: 500vw;
}
The question is how to calculate what height .sticky__parent should be and what width .scroll__section should be??
percentage = percentage < 0 ? 0 : percentage > 400 ? 400 : percentage - where did we get 400?
@@ob5804 we go to a max of 400 as we still want the final 100vw to remain on the screen. So 500vw - 400vw = 100vw. Does that make sense?
@@ConorBailey I have 6 pictures, so percentage = percentage < 0 should be in the script? 0 : percentage > 600 ? 600 : percentage, and in styles .sticky__parent {
height: 600vh;
} .scroll__section {
width: 600vw;} and the pictures are 400px, but still there is a lot of empty space after the pictures in .scroll__section(((
This was really helpful, thank you very much.
Cool, exactly what i need! Thank you!
its a very good approach, but wouldnt it be better if the height follow the content inside instead of being defined from the beginning?
hi Conor , if you can please could you do a tutorial using threejs and infinite scrolling gallery with different sized image planes
Amazing!!!!!!!!!
Thanks bro
Awesome! 👍
Thanks mate. Always appreciate your support! Legend
great stuff. I learnt a lot thx
thank you for the tutorial, it works great! I have a question: What happens if the scroll container is not 100vh but has a static height like 500px? Is it possible?
Is This transitions are possible with fixed screen ? Means 1 slide view on entire screen on scrolling
thanks.
can this effect be achieved with lerp function for easing effect?
You are tooo goood
Thanks you! 😁
You saved my day.
Amazing, Conor! I've watched many of your videos, and you're truly an expert in Vanilla JS. Could you please share your learning path for JavaScript? Thank you!
Can u add text between the images?
link code ?
Why 500vh and 500vw? Why not 1000? Any reason for that number? What if I have 100 images?
you can use that just adjust accordingly
top :0 not working after smooth scroll by lerp function, any help will be appreciated
You actually do not need to set any width that equals the height anywhere. Also using transform is not that good as just setting the scrollX of our sticky scrollable component. Also no need to set `position: absolute;` to the child. Keep things simple.
Cool cheers for sharing! Why don’t you make a video on it? Share your knowledge! You clearly know it all! 😉
@@ConorBailey Now you know it as well. Enjoy ;)
Thaks for all
and if i use image that are in my folder howi can do it?
How to make the .sticky block have the width of the content in the .scroll__section block? I have 6 images
.sticky__parent {
height: 600vh;
}
scroll__section {
height: 100%;
width: 600vw;
display: flex;
/* justify-content: space-between; */
align-items: center;
gap: 50px;
}
img {
width: 400px;
height: 80%;
object-fit: cover;
object-position: center;
}
thank you
hey ! why translate3d and not translateX ? thx
I read that using translate3d generally performs better / faster in most browsers here: stackoverflow.com/questions/22111256/translate3d-vs-translate-performance
Although I don’t believe it makes too much difference to be honest 😅
Cheers!
Belly belly good....they see me scrolling 😎😎
😇