How to do parallax effect

[sparkzweb]

Hey Guys,

How do I create websites with those cool sections that have a background that move as you scroll and have text on top?

Eg. http://www.easypayments.me - scroll down to the part where it says “all our knowledge has its origin…”

http://strategyworks.ca

http://dotteddesigns.co.za/ (scroll down till you get to that really cool red part)

So what I am asking is how do I create these in Webflow?

Also how do I get to fill in a colour on them eg. http://snowballsummit.webflow.com/
where at the top those mountains, in the bottom part of it theres that blue box that makes them look blue

and also on the dotted designs site, there was that red box

how do I fill them in like that?

and if I have where to have several of these boxes stacked on top of each other how would I get them to all use the same background image but it flows properly?

Thanks!

[Jonas76 (Joel)]

Its called Parallax (even thought its not really, technically). The method is simply placing a static image inside a div(block or image element). So do this, place a ‘Section’ with 100% width and 300px tall. Upload a picture (but don’t drag and drop and image, upload it from within inside the ‘Section’ on ‘background’). Once you uploaded the image select ‘Tile’ none, and ‘Fixed’ Checked. Et Viola. You have the Parallax you were after.
Make sure the image is large enough to cover the all the area, and if not just make sure its tileable.
Cheers!

[bartekkustra (Bartosz Kustra)]

Set the background image for your section and make it Fixed like on the image below

[sparkzweb]

Thanks! @Jonas76 @bartekkustra
But how do I make them filled in with a colour but its still transparent?
Like in the: http://dotteddesigns.co.za (the really cool red part)

and http://snowballsummit.webflow.com at the top with those mountains.

[Jonas76 (Joel)]

@sparkzweb
What we described in our response does exactly that. Bartek even put a picture up. This should work!

[sparkzweb]

Thanks but thats not what I meant in my 2nd post.

I mean how do you fill the box in with a colour that is translucent and so that you can see through the colour and see the background image but there’s a tint/hue on the colour.
Eg. on http://snowballsummit.webflow.com - on there theres this blue box that makes the background image beneath it look blue - it’s at the very top of the site, just scroll down slightly and you’ll see it.

Please advise @Jonas76 & @bartekkustra
Thanks

[bartekkustra (Bartosz Kustra)]

GIve a troubleshooting link, please

[sparkzweb]

@bartekkustra
Sorry I haven’t got any kind of troubleshooting link.
That website isn’t mine! It’s from the Webflow gallery.

Can you see how when you scroll the mountains enter that blue box and look blue?
I want to know how to put that tint on the pictures along with the whole parallax background effect thing.

Thanks.

[rowan]

You can do it in 2 ways.

1. Just add a colour layer on top of an image with some opacity in Photoshop and upload to Webflow.

2. You can upload a background image in Webflow and add another Gradient layer on top of that. Then you give it red opacity 60% for example. See:

[sparkzweb]

@rowan
Thanks for explaining that!

Now my last question, I don’t if it is even possible but how do I make it so that I have several of these fixed divs each with a different colour tint - but they all hold the same background image.
So it would give a really cool effect so that as you scroll the thing that was in the red box would enter the blue box and look blue etc.

Thanks in advance!

[rowan]

Something like this?

https://webflow.com/design/nicebg?preview=c601b19ecb136c8d618f1bddc890583b

It’s quite easy

[sparkzweb]

Yep exactly that @rowan
How do you do that?

Also to get really nice rich deep colours like the image below.
Do I have to do it in Photoshop or is it still possible within Webflow?
I would need to be able to do it in webflow to be able to have the cool colour changing

Plus anyone know the font(s) used in that pic?

[VihanVanDerWalt]

Hi @sparkzweb, I see you stumbled across our site www.dotteddesigns.co.za as that banner is part of our site.
If I may ask where did you find our site? Lol.
I used Lato (light) for the top font. Lato normal for the bottom.

[sparkzweb]

Hey @VihanVanDerWalt
You or someone else posted the site in the Show&Tell Forum!

Do you know how to get that really rich deep colour overlay on background images?
Can it be done in Webflow or does it have to be done in Photoshop?

Thanks

[thesergie (Sergie Magdalin)]

@sparkzweb it looks like it’s done in Photoshop with a Multiply layer effect.