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?
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.
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)
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.
Hello, I’m writing from 2018! 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!
@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.
Well now we have Object fit, so this would be one solution. Wow, this is an old thread! Great that it’s still useful! 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
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.