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: 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

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…

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 :wave: :+1: :pray:

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.

  1. Webflow Showcased | Apple October 2020 Homepage Parallax Animation | Built in 1 Hour!
  2. Webflow Showcased | Parallax Effect Animation — Cloneable
  3. Webflow Showcased | Parallax exercice
  4. Webflow Showcased | parallax-Website
  5. Webflow Showcased | Apple October 2020 Homepage Parallax Animation | Built in 1 Hour!
  6. 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!!