Laying out parallax elements?

[aOne (Alejandro Pedroza)]

Now that we can build a parallax effect, for us newbies, how should we lay out the elements? Let’s say you have a collage of images with parallax effect, some placed over/under others to create depth effect, how would you go about placing them on the page? When I try to do this, they always end up out of place once I preview. Does this still involve the use of columns or flex?

Here is an example https://www.adamunderwear.com/ not too many images but you can see how everything is nice and tidy.

Hope this makes sense!

Thanks!
Alex

[garymichael1313 (G.J.)]

Hi @aOne

Okay I started using Webflow just a short while ago… and YES it’s without a doubt the most complete application on the market for learning: core principles, layout design, site structure, terminology, etc. So I dove in a couple of months ago… and I would suggest you take a slightly less ambitious approach right out of the gate (if possible). I believe the best way to learn in the Designer is to use: “Rows”

Check out my training page I use:
https://preview.webflow.com/preview/gj-project-1?preview=924bea4737f9103322cb65923cee8987

Just about anything is possible with Webflow, but the problems is definitely in:
“Structuring Sections > Divs > Content” in layers. First get a system for how you want your layers to work…

1. Section - for the name of your section, I.e: Hero, Testimonials, Features. I use sections to hold and name my areas that I’m going to work with.
2. Div - for the wrapper… this is how I decide the layout system… Grid, Flex, Float… however planned.
3. Content - sometimes it’s best to minimize the layers inside of content. Try using only 2 Divs with Webflow at first.

This has easily been the biggest challenge when using Interactions in the Designer… because confusion comes when you have dozens of classes.

To commit to this type of parallax effect for you first endeavor Use 1 row to start and that’s it!

1. Section - named “Parallax Row 1” as an example - Display: Block
2. Div - name “Clothing” or something like that - Display: Flex
3. Content Divs - “Clothing Grid” - Display - will inherit flex but can also flex layer below
4. Content - “Clothing Mens” - Display - inherited

This is just a suggested example… but this way, when you add parallax interactions you will have “1 ROW” with everything “In Proper Display Structure as Flex” and you can see the effect better… Besides there will only be 2 or 3 photos in the row… so it’s easier to view and visualize in your head. Check out my layers to see.

Hope these suggestions help. Have a great day!