------------------------------ 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.
@@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?
@@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(((
@@ConorBailey Hi. Can you make tutorial of this? - - - - -> Image Grid on Scroll - Bricksbuilder - Bricksforge - GSAP - - - - -> this is the name of the video on RUclips because RUclips itself removes the link.
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?
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; }
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!
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!
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.
King of advanced front-ends ✌🏽😁
Thank you so much for this video and your whole channel! it was very helpful
Thanks a lot!!! 👍👍👍
Very cool video.
You told everything very detailed and clear!!!
Super helpful
Love the fact that you explained it so well❤
------------------------------ 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.
can you please provide the code as well
This is awesome! Thanks Conor!
Very elegant, going to use this !
Was looking for this for months... thanks, great tutorial
Glad it was helpful!
Thank you. I needed this.
Thaks for all
This is very creative. Clear tutorial.
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(((
Is This transitions are possible with fixed screen ? Means 1 slide view on entire screen on scrolling
Thanks a ton Conor
can this effect be achieved with lerp function for easing effect?
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 RUclips because RUclips itself removes the link.
is there any documentation for math being used within an html document. how do you make calculations to animate elements however your want.
Thank you very much keep up the great work
Thank you sir, i really appreciate your tutorial
its a very good approach, but wouldnt it be better if the height follow the content inside instead of being defined from the beginning?
This was really helpful, thank you very much.
link code ?
Can u add text between the images?
hi Conor , if you can please could you do a tutorial using threejs and infinite scrolling gallery with different sized image planes
top :0 not working after smooth scroll by lerp function, any help will be appreciated
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?
Cool, exactly what i need! Thank you!
and if i use image that are in my folder howi can do it?
Awesome! 👍
Thanks mate. Always appreciate your support! Legend
Amazing!!!!!!!!!
great stuff. I learnt a lot thx
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
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;
}
Thanks bro
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!
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!
thanks.
You are tooo goood
Thanks you! 😁
You saved my day.
thank you
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 ;)
Belly belly good....they see me scrolling 😎😎
😇