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

Hello, dear Webflowers!

:blush:

I know that I am not the first user who tried to create and use different types of “Parallax” effect in Webflow without custom code. After we got 3D transforms feature I found out the trick how to create such effects in easier way.

1) “Simple parallax”.

(I think almost everybody knows, but will repeat)

Create section (or div), set background image and make background settings: fixed


2) ** Parallax with background moving up on scroll"**

a) Create section (div), give it some height. Set position: relative, overflow: hidden
b) Inside this section add div with position: absolute

c) Go to Transforms and apply scale by Y- axis ONLY!!! = 0.8 (or something less than 1)
Don’t forget to click on the lock icon for unlock X and Y axes dependency. Less this definition will be - you will get higher “paralax speed”. BUT I do not recommend to scale it less than 0.8 if you are planning to use full-size background image, because it will be extremely hard to correct background position.

d) In the Transform settings change “Origin transform” to 50%; 0%

e) Add background image to this div:

You will want to increase image height because when we applied scale by Y-axis, div got “shrink” vertically.

f) Last step - set position settings:
Height should be equal height that you set in background settings
position: absolute, alignment: top


3) “Parallax with background moving down on scroll”

a) Create section (div), give it some height. Set position: relative, overflow: hidden
b) Inside this section add div with position: absolute

c) Go to Transforms and apply scale by Y- axis ONLY!!! = 1.2 (or something more than 1)
Don’t forget to click on the lock icon for unlock X and Y axes dependency. More this definition will be - you will get higher “paralax speed”. BUT I do not recommend to scale it more than 1.2 if you are planning to use full-size background image, because it will be extremely hard to correct background position.

d) In the Transform settings change “Origin transform” to 50%; 100%

e) Add background image to this div:

You will want to increase image height because when we applied scale by Y-axis, div got “shrink” vertically.

f) Last step - set position settings:
Height should be equal height that you set in background settings
position: absolute, alignment: top


You also can combine this effect by using several layers with different settings


Video how it works:

Live example: http://paralax-scroll-effect.webflow.io/

Read-only link: Webflow - Paralax-scroll-effect

Will be happy if my tricks can be useful. :smile:

Best regards,
Anna

57 Likes

This is brilliant @sabanna!

4 Likes

Very cool @sabanna! Thank you for putting this tutorial together - awesomeness.

3 Likes

:smiley: Thank you guys!
It was so awesome to find out this way to make Parallax, that I could not keep it only for myself :wink:

8 Likes

Wow @sabanna - Great great stuff!

3 Likes

So, so great, @sabanna

3 Likes

Thank you Anna! This is what I was looking for! You are awesome!

3 Likes

You are all welcome, guys :slight_smile:

2 Likes

Been using this in many sites, super cool trick! :slight_smile:

3 Likes

Totally seems like what I’ve been looking for, but I can’t make it work! I’m a designer and my code familiarity is way questionable, so… My questions:

Under 2) BG moving up on scroll,
• Why do you say “create section” and follow it with (div)? Aren’t these two different things? (Under b you say to put a div inside the section. I’m confused.
• Also, give it how much height? Just enough to take it off of auto? Or the pixel height of the image I want to use? (I’ve tried both and neither seemed to work.)
• Steps under c) and d) were easy enough to do… but after adding my BG image to the div, it does look stretched horizontally as you alluded to when advising us to increase height, but how much of an increase? I tried doing this visually until it no longer looked stretched horizontally, but after doing step f) position: absolute and alignment: top, the images stretched out horizontally again!
• Also under f), “Height should be equal height that you set in background settings” is confusing me. Nowhere in the previous instruction do you use the term “background settings.” Do you mean the increase in step e)? Or the random height added in step a)? Or the height of my image?

So currently, my background image does not reach across my browser. (it’s aligned left with white on the right side, even though the image looks stretched horizontally… And every time I try to add a section for a heading or other content to test scrolling over the BG image, I can’t make the section go on top of the BG. It drops in to the right of the image and compresses the image to less than a couple hundred pixels.

Obviously I’m such a newbie that I’m missing stuff that others already know that your instructions aren’t covering… anybody have any more details that would help me out?

Thanks in advance!
D

2 Likes

Hello, @dvanetc.

I am sorry to hear that you stuck with setting it up :confused:
Feel free to open the site-example from read-only link and see all settings “live”

https://preview.webflow.com/preview/paralax-scroll-effect?preview=f531fec1e704490f406879a81b17f6db

3 Likes

Thanks so much for your reply Sabanna, I should have thought of that. I am studying the different element settings and trying to duplicate the effect with my own files, but in the meantime, here is a very specific question that has me stumped:
• With the “Move up parallax” div selected, I can see you indeed have added a “Transform Scale” of 0.8. However, when I open up the transform “Settings” “Origin” is not 50%; 0%, but it appears to be 50%: 50%. Why would that be?

Thanks for your help,
D

2 Likes

50%x50% - it is default settings. You can change it by clicking on any dot in the square.

2 Likes

Hi Sabanna,
Yes, but I was looking at your example for the correct settings. If you had the “Move up parallax” div set to 50%; 0%, (which I assume it would be since the effect works when previewing your file) shouldn’t the setting be 50%; 0%? Your “transform Scale” setting was .8, as it should be, but the Settings Origin shows the default 50%; 50%.
??

D

2 Likes

All settings in the site example set exactly as I explained in step 2 - d

2 Likes

Thanks for your reply Sabanna,
I have been working in Webflow within my Safari browser. The Origin setting for your Move-up-parallax-block shows the default 50%; 50% setting. I just tried it in Chrome and it appears correctly as 50%; 0%. (!!) So it seems I should avoid working within Safari!

Thanks of your help!
D

3 Likes

Hi Anna
just replicated “Paralax with slow move up” for one of my project.
It works well on my Mac in both Safari and Chrome.
However it doesn’t work on my iPad 2 / iOS 9.3.3.
tried to open your live example, but parallax effect doesn’t work on your page either.
Any ideas?
Vlad

2 Likes

Hi, @Vlad!

Unfortunately, mobile phones and tablets do not accept background images which set as fixed (it is not the same with position: fixed). And it is the main settings for creating Parallax effect.

Hope it will change with time :confused:

Regards,
Anna

2 Likes

Hi @sabanna. Thank you for your comment. Vlad

3 Likes

Hi @sabanna ,

This is awesome - I’m awful with code. Is there a way to do the above ‘background moving up on scroll’ but at a faster pace/rate? I’m trying to recreate this sort of thing iOS 15 - Apple

Tom :slight_smile:

2 Likes