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

Hello, @Tom_White.

I tried to experiment with that for creating “faster scroll” effect, but its end up with pretty crazy solution LOL:
make scaling settings negative (-0.8 for example) but using background image which is flipped upside down by itself.

If you will want to do this - try :slight_smile: But I didn’t post this solution because it is kinda “too much tweak”.

Cheers,
Anna

2 Likes

Hi @sabanna,

Yeah I see what you mean about crazy! Thank you though, this has really helped me out, hopefully it wont take too long :information_desk_person:

Tom

2 Likes

Hi Anna,

This is a great tutorial, followed along very easily thank you!

It’s not a major problem, but would there way to solve the issue of when the desktop window is resized? i.e, the background image distorts on a smaller screen rather than staying relative to the screen size.

I’ve played with VW / VH settings but I can’t figure a way to keep the image from “squashing up”.

2 Likes

Hi Anna, thanks for this awesome trick! I’m just having a bit of trouble making this work for myself. In particular, I’m trying to make a single item move down when scrolling down and move up when scrolling up. Like you have with the squirrel image in your example. Here’s my read-only link and temporary site link for review:
https://preview.webflow.com/preview/hyundai-rfp-website?preview=0bd2b1c96edee9d2ece6ef7ff48dd40a
http://hyundai-rfp-website.webflow.io/

The thing I’m hoping to move up and down is a little car icon (Car Down_Nav) that will seem to move up and down the road on the left of the screen. Thanks for any advice you can give!
Jason

2 Likes

Hi, @MIJason

Here is the video with steps that you have to do for achieve the effect that you want:
https://drive.google.com/file/d/0B-7cg8BSq1Z_U29pTGhuR3ZqSlE/view

Regards,
Anna

3 Likes

Thanks Anna! You’re a lifesaver :smiley:

3 Likes

@sabanna

Is it possible to do this without using a background image?

I am able to create a simple parallax with a background image but I don’t want to use an image in my hero. I just want the rest of the page to slide up over my hero. Can you explain to me how to achieve this?

https://preview.webflow.com/preview/soul-lucianis-top-notch-site?preview=0a65562f3998a139d19ee109fd340e51

2 Likes

Hi, @soulluciani

You don’t need the parallax effect for that.

Just make your hero section position: fixed and section next after that give top margin equal to a hero section height. And of course, don’t forget about z-indexes

Best,
Anna

1 Like

@sabanna

Thanks for the tip!

2 Likes

Hiya,

This is absolutely wonderful so thank you sabanna for the fantastic work there. Was just looking at this kind of effect on a site and they had done it with pure CSS too and had a tutorial for it too :

Your method seems to be a lot simpler (which I really really like :slight_smile: ) as I much prefer simple over complicated any day!!

I was just wondering though if someone could possibly take a look at a quick example I put together to test this all out?

The link is :

https://preview.webflow.com/preview/mbpiano?preview=71f633b819a9023dea9f701b438966a0

It is working but when I apply the 0.8 scale to the image the DIV that it is in scales down and so isn’t any longer starting from the top of the section container that it is in. If you don’t know what I mean by that then if you take off that scaling then you’ll see what happens to the div with the image in it.

Just wondering what step I’ve missed as would really love to use this but can’t seem to figure out what I’ve done wrong. In my defence it is very late here and I should probably be getting some sleep and looking at it with fresh eyes but you know how it goes, you come across a fantastic effect that someone has created (thanks again sabanna!!) and just want to try it out there and then!

Anyway, any help with this would be greatly appreciated.

Many thanks in advance,

Mark

2 Likes

Just implemented some of these into a design I am working on. Thank you so much for this resources! Well done.

2 Likes

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