Streaming live at 10am (PST)

Extra space problem after parallax


#1

Hello,

I’m new to Webflow, its interactions, and the forums, so I’m seeking some help.

I built this page (https://apollo-anniversary.webflow.io/) and created a multi-layered parallax hero and, for some reason, am getting some weird spacing between it and the grey 970x250 box that follows it. It appears the spacing is in the section that the parallax’s div is placed into.

Does anyone have any ideas how I can adjust this to tighten up the space and get the content below the parallax section to start scrolling faster? Thanks!


Here is my site Read-Only: https://preview.webflow.com/preview/apollo-anniversary?utm_source=apollo-anniversary&preview=54670e0a756a1e62da94eab7e91e894b


#2

Welcome to the forums @BonOrbitz!

It seems like your Read-Only link isn’t working. Could you try and post it again? Would love to help you out.


#3

I generated a new link and updated my post. Thanks for checking it out!


#4

So everything is functioning like it should. You are experiencing that extra space because it is reflecting the section that is containing all those image elements you are shifting up (See the white background beneath the light blue?)

The trick here is to have an element (or image you are using) that is grounded to the bottom of that section (probably will need to be position: relative). That way it won’t be empty space. What do you think about keeping the bottom image element there?

You could probably still have a very subtle shift up of that element to keep a movement texture you are trying to achieve here.

Hopefully this is helpful and can lead you to explore some interesting ways in achieving this experience.


#5

Thanks for the suggestion! I thought it had something to do with the section that’s containing the div the parallax elements are in, but I couldn’t figure out how to deal with it. I’ll tinker with it more and let you know what I figure out!

**Edit: I figured out what the problem is thanks to your assistance: The top layer (the large astronaut on the right) was set to move up along with the rest of the layers, thus creating that gap. I turned off the animation on it and set it to position: absolute and locked it to “bottom” and now it scrolls as it should. **

Thanks again!