Streaming live at 10am (PST)

How to do Parallax Background Effect on Scroll


#1

Hi everyone,

I am kinda new to webdesign and webflow. Working on my first client project and am trying to use this kind of a background parallax scrolling effect where the page scrolls over a background image, or even over different once in different sections, which also move up during scroll but slower than the page. Is that possible to do with webflow without coding? If not, I would be happy if the background images staying still but the page scrolling over the background images like on this website:

http://www.themerchantkitchen.com/#elevated-street-food

Been playing around all day trying to figure out how to do this. Any help is greatly appreciated.

Thanks in advance


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hey @VladyRahn

You can absolutely achieve this, with ease.

Firstly, to do what they have done with the images in your link, you just need to make sure the image is not fixed.

If you want to get a bit more advanced with Parallax and do something like this:

https://preview.webflow.com/preview/parralax-438adc?utm_source=parralax-438adc&preview=260d8bfec9c44b24022a5c32444f0f95

There are plenty of tutorials you can pull up with a quick search. Happy to point you in the right direction if you still need help :slight_smile:

Tom


#3

Thanks for the reply. That is a pretty cool effect in the link you placed in the comment, thanks so much. I will see if I can find something that resembles more the effect on the restaurant website. Still not sure how the scrolling effect works like it is on the website I provided.


#4

Did changing the background image off fixed not work as you wanted?


#5

I was able to create this kind of a parallax effect while having the background image fixed, but that means the background image doesn’t move at all, the rest looks the same though, which is kindaOK. I simply don’t even know where to begin to create the kind of effect shown in the link I provided in my initial post. Isn’t it different in layout altogether? It’s not as simple as creating the effect I just mentioned above, right? Don’t you have to layer a bunch of div’s and pics and create animations on scroll etc? Sorry for being so confused, kinda new at this, but figuring this out step by step.

Thanks for your help, really appreciate it.


#6

Link above is just a black screen


#7

Hi Wilson,

If you click on the ‘Preview’ icon (top left within the Designer) you will see a ‘Live’ version of the site and the image will load and scrolling the page will reveal the effect.

Regards,
Keiran


#8

Hi @VladyRahn

Here’s a link with info from Webflow University regarding Parallax effect:

Hope that helps you.
Regards,
Keiran