Streaming live at 10am (PST)

Different Parallax effects possible with Webflow (no custom code required)

From what I’ve read parallax is not supported in mobile browsers due to performance overhead. Same goes with fixed images without some js hacks.

1 Like

It is possible now with IX2. check out this page on your mobile device

2 Likes

This is pure gold :slight_smile:

1 Like

Thanks, this works great on Chrome, but doesn’t seem to work at all on Firefox and Edge. (Can see it on the sample from @sabannahttp://paralax-scroll-effect.webflow.io/)

Specifically, the “Paralax” with slow move up and the “Paralax” with slow move down.

Is there a better way to do this with IX2?

1 Like

Hey, @collabsolutionsmn!

It is because of different browsers renders 3D transforms differently. Unfortunately.

With IX2 it can be done easier, you are right.

@sabanna I think I’ve set this up properly but it seems I am getting a bug or something. I have made a video so you can see what I am talking about: https://www.loom.com/share/59017068ad844a788c4be0c239a96a4c

Here’s my read-only link: https://preview.webflow.com/preview/steakhome?utm_medium=preview_link&utm_source=designer&utm_content=steakhome&preview=6f0390e3fbd30e41a284b46fc47db629&pageId=5dad695c4c72cc57edf64b07&mode=preview

I appreciate your help in advance!

Bec

Hi, @rlowe1228!

My apology for the delay, it seems your preview link is not active anymore. Were you able to figure it out?

Cheers,
Anna

@sabanna no worries! I figured it out :slight_smile: Thanks so much.

@sabanna Hi Sabanna! This is wonderful, thank you. Is there a way to keep the background image from being distorted as the browser is resized? Thank you.

@magicmark Hi Mark, did you ever come up with a solution for this?

Well now we have Object fit, so this would be one solution. Wow, this is an old thread! Great that it’s still useful! :smiley: You know Parallax effects are now able to be created with Interactions 2.0? At the time of this thread that didn’t yet exist in Webflow :slight_smile:

Object-fit property. Select the image and use this feature, you can use 10% width and height on the image (just make sure the parent of the image has height of some sort set). Hope that helps.

1 Like

Oh wow… this changes everything! Hallelujah!

Thanks for sharing. Saved a lot of time and resizes perfectly.

1 Like

My hero of the day! Thank you so much Sabanna

this awesome and beautiful my friend

Great stuff, but “Slow Move Up” unfortunately not working with WIN Firefox Version 89…