Streaming live at 10am (PST)

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


#1

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: https://preview.webflow.com/preview/paralax-scroll-effect?preview=f531fec1e704490f406879a81b17f6db

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

Best regards,
Anna


Animation based on scroll position
How would you create this cool parallax effect?
Does anyone know how to do this effect in apple website?
Page image change as scrolling
Partially fixed background images
Parallax Scrolling
Scroll / Paralax Effect?
Depth Parallax Help
Parallax Background (For Dummies)
Background Hero Image Parallax Scroll?
Parallax Effect (Mobirise)
Connecting CMS and Lightbox
Background Parallax effect on scroll moving down on scroll
Getting rid of a horizontal scroll bar
Cursor Parallax Problems
Section scrolling interaction
Fixed background image rendering on phones
Cloneable: Poster glitch effect inspired by CoDrops
Fullscreen Cover Image
Looking for a Parallax Webflow Guide
#2

This is brilliant @sabanna!


#4

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


#5

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


#6

Wow @sabanna - Great great stuff!


#7

So, so great, @sabanna


#8

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


#9

You are all welcome, guys :slight_smile:


#10

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


#11

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


#12

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


#13

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


#14

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


#15

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


#16

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


#17

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


#18

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


#19

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


#20

Hi @sabanna. Thank you for your comment. Vlad


#21

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 http://www.apple.com/ios/ios10-preview/

Tom :slight_smile: