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

Hey @sabanna,

Thank you for this step by step. I have some sections with the “simple parallax” effect currently and really just need a solution for mobile. Will these transformations happen on mobile?

Edit: Upon further testing, this transformation does not work on mobile. Any reason why this would be?

2 Likes

You are right, @161creativedesign, it will not work on mobile devices.

The reason is that these type of devices are not supporting background with fixed settings, unfortunately.

1 Like

Got ya, okay so wouldn’t applying the same transform affects to a div filled with an image (not as the background) fix this?

3 Likes

Actually, @161creativedesign for “Simple parallax” you can just use image with position: fixedyou will just have to adjust z-index. Content have to have z-index higher than that image.

1 Like

Here is clonable example: https://webflow.com/website/simple-parallax-2
Live version: http://simple-parallax-2.webflow.io/

1 Like

@sabanna,

Thank you for your continued support. I have studied this example and while I can achieve this effect on desktop browsers (works rather wells across many different browsers), I still cannot achieve this affect on mobile. It’s my understanding, like you said that these browsers don’t render the “background:fixed” attribute but I have seen nesting a div inside of the section and applying “fixed” styling to the nested div rather than the background element, as suggested here.

Does this sound like a work around? (referring to @cyberdave comment halfway down the thread)

2 Likes

On a side note, the more complex versions of parallax shown above now do not work on firefox and edge browsers. Does anyone know why? I believe they worked before.

3 Likes

Here is a preview of parallax mouse movement and parallax scrolling in Interactions 2.0:
https://webflow.com/workshop/building-parallax-scrolling-and-timed-animations-without-coding

2 Likes

Hello, I’m writing from 2018! :wink: does anyone know if something changed and now I can create a parallax effect that looks good on mobile devices? I did some tests but I can not get it. Thank you very much!

1 Like

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: Loom | Free Screen & Video Recording Software | Loom

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.
Shared with CloudApp

1 Like