Hi! I’m currently building a portfolio website for my graphic design work and I need help with creating a page that showcases my poster designs with horizontal scrolling but has content above it. I know you need to split the page into two pages and then stack all pages vertically for it to work but I don’t want to my website to stack vertically.
This page has exactly what I want but I’m not sure how to make it work 
I’ve basically watched all the tutorials on horizontal scrolling and nothing’s been working for me so please help me figure this out!
Thank you!
You can achieve this on a vertical page as well,you’ll just need to adjust a few things.
-
Set the text at the top to Fixed.
-
Add a 50px delay, then apply a Move animation that moves the text upward until it exits the screen. This creates the scrolling effect.
For the project images:
-
Set them to Fixed as well and position them like in the reference.
-
For the first step of the scroll animation, use Move and animate the image until it is fully visible.
-
Add a delay (you’ll need to adjust this depending on how much content is above the images).
-
Then, add a second Move step to the same animation. Keep the value on the right the same (this maintains the upward movement), and adjust the left value so the image continues moving until it exits the screen.
Finally, make sure to leave enough blank space below the content so all the images have enough room to complete the scroll animation. After that, you can add your footer (it doesn’t need to be fixed).
Hope that helps! If anything is unclear, feel free to ask.I’m happy to explain it further.