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.
It is possible now with IX2. check out this page on your mobile device
This is pure gold
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 @sabanna – http://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?
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 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.
Oh wow… this changes everything! Hallelujah!
Thanks for sharing. Saved a lot of time and resizes perfectly.
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…
I just found this tutorial a few days ago and followed your instructions and checked out your samples. Everything worked as intended for a few days - awesome!
Then two days ago or so, I noticed that the parallax effect stopped working in the following browsers:
- Chrome Version 99.0.4844.5
- Firefox Version 98.0 (64-bit)
- Brave Version 1.36.111 Chromium: 99.0.4844.51 (Official Build) (arm64)
However, the effect does work properly in:
- Safari Version 15.3 (17612.4.9.1.8)
My guess is that there’s been an update that is preventing the CSS to operate the way it used to. However, that’s all my guess. I don’t have any evidence of it.
Can anyone confirm the errors that I’m seeing or comment?
Dear Anna
I only joined the webflow community. I was looking for exactly this parallax feature! Thank you so much for sharing this with us - you made my day!!!
Kind regards,
Ian
Thank you Anna for creating this (and so many other) helpful guides!
I check the Made in Webflow showcase every day and I’ve seen a TON of parallax sites recently. I figured I’d drop some links here for new folks to the thread.
- Webflow Showcased | Apple October 2020 Homepage Parallax Animation | Built in 1 Hour!
- Webflow Showcased | Parallax Effect Animation — Cloneable
- Webflow Showcased | Parallax exercice
- Webflow Showcased | parallax-Website
- Webflow Showcased | Apple October 2020 Homepage Parallax Animation | Built in 1 Hour!
- Webflow Showcased | CMS parallax scroll into view
We also wrote a blog post reviewing/rounding up some of our favorite Cloneable Webflow Parallax Projects.
This community is the best!!