Interactions 2.0 Parallax Hero Image Top Space?

Hi

I know this is early, but I’ve been playing with the amazing Interactions 2.0, trying to get a subtle parallax background image going on for my hero.

I’ve got it working nicely, but can’t seem to get rid of a small gap at the top of the screen. Anyone got any ideas?

Many thanks in advance!

https://preview.webflow.com/preview/dustproof?preview=9da987afe935f662e2a40aa2ec06c955

Hello, @Jezerama

You will need to change few things:

  1. Change the scrolling offset for the div that you applied interaction to since it is already fully visible when page loads

  1. Move the first action to 0% keyframe

  2. Change the amount of % that will be moved video on the second action to something around 70-80%

CloudApp

Should work:

CloudApp

1 Like

Amazing, thanks @sabanna - works perfectly now.

And thanks for IX 2.0, it was worth the wait :slightly_smiling_face:

1 Like

Hi @sabanna, I have another problem with the scrolling and I hope you can help…

I’ve got the landing page sorted, working really well, but the ‘Classic Folios’ page has another hero and the parallax doesn’t seem to work with it, it produces a gap at the top again. It’s probably something obvious I’ve missed, but do you have an ideas?

https://preview.webflow.com/preview/dustproof?preview=9da987afe935f662e2a40aa2ec06c955

Thanks,

Jez

Hi again, @Jezerama

I would recommend duplicating action list for that page because hero section on the Home page was bigger and it wasn’t affecting offset as it is on the new page:

CloudApp

So when you duplicate action lists you can move the top action item to exact keyframe for compensating the offset

CloudApp