Streaming live at 10am (PST)

How to get background images to parallax move

Hello.

Is it possible with Webflow to create the parallax effect that appears on the site below? It looks as though the image frames aren’t moving. Rather, the images within the frames are moving as one scrolls.

@oread, those aren’t background images, they are just images nested within divs that have some effects applied:

There are two divs being transformed on scroll. The second div below the container media desktop_image _s has a translate3d applied to it on scroll, and the fourth div (the immediate parent of the image) has a translate3d and a scale. They both run at the same time on page scroll.

You could definitely reproduce this effect using IX2 in Webflow.

Maybe give this tutorial a try: https://university.webflow.com/lesson/parallax-movement-on-scroll-interactions

1 Like

Thank you, @sam-g! This is helpful. While I get what you mean in theory, and while I’m familiar with that tutorial you recommended, I still don’t know how to realize your solution with the available Webflow tools. How does one nest images?

@oread - I think what they are doing is positioning an element absolutely, and then having a “screen” or “mask” div that has overflow set to none. When that mask moves over the image and the image itself doesn’t move, it creates the effect you are looking for.

You can see what I’m talking about in the parallax effect on this codepen: https://codepen.io/prvnbist/pen/zRMaeK

You can definitely do this in Webflow, it might just take some tinkering. I don’t have time to build a demo at the moment, but I’m sure someone has one out there that you can find with a little searching. Or just play around in the platform and I think you’ll figure it out relatively quickly. Getting the easing and scaling adjusted perfectly might take some time, but just try to get the basic effect going first.

Let me know if you get stuck, I’ll try to help out when I have more time.

@sam-g — You’re a hero. Well so I’ve layered a div block on top of my image. But …

One, the image isn’t nested within the div. Even though it’s behind the div, it is still visible.

Two, I see now that for the effect to work, the image needs to be much larger than the mask.

Any thoughts on how to elegantly deal with these issues?

@sam-g I feel like I’m close. Please see the link below. The trouble now is that the image is visible behind the div layered above it. I don’t know how to stop that overflow.

https://micropsi-industries.webflow.io/parallax-test

Many thanks for your time.

@oread - I’ll try to build a demo, might be a day or two.

Wow. Thank you in advance!

@oread - take a look at the sample here: https://robbies-fabulous-project.webflow.io/contact

I think it’s pretty close, definitely might need some more tinkering with the exact position movements.

Read-only: https://preview.webflow.com/preview/robbies-fabulous-project?utm_medium=preview_link&utm_source=designer&utm_content=robbies-fabulous-project&preview=eb99eff978d437863f1161e0e96a8acb&pageId=5eecd8f66ca061147372f4ee&mode=preview

@sam-g. Thanks again and again. Incredibly helpful.