Hello, dear Webflowers!
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.
Best regards,
Anna