Streaming live at 10am (PST)

Background layer that also moves up at different pace triggered by scroll (parallax)


#1

Hi there,

While I'm more of a beginner in this, I was trying to create a image that runs like there is 2 layers of the page, one on the background and another on top. while, both of them would move up when scrolled up, the lower level moves up abit slower. That created a smoother feeling when scrolling down the page.

I've went through some site hunting to get an example of the idea of what I was talking about.
http://company.flipermag.com/

It seems like possible, but then I had a hard time figuring out how to do it.

Is it possible for any advise, or is there any template?

Thanks!

Oh, by the way, there doesn't seem to be a choice of fonts when it comes to Mandarin.. and google fonts has none too. am I able to upload fonts myself?


#2

This should help.

http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641

Also: http://forum.webflow.com/t/how-to-get-parallax-background/2198

There is not yet a way to easily to do via the Webflow Designer tool.


#3

Cool, so it's actually called parallax background.

I'll try working on it to see if it could actually get me there.

Thank you.


#4

yup. Just an FYI:

Parallax is when layers move at different speeds. It is NOT when a background image position is set to fixed. Lots of people (especially marketers that like to throw out buzzwords like 'web 2.0') get that confused.

Here's a good example of what parallax really means: http://matthew.wagerfield.com/parallax/


#5

How is it possible to replicate the same smooth scrolling wheel effect in webflow?
I know its a script or jquery, is it possible to embed the same script in webflow somehow?


#6

@MikePrince, you can use different scripts, both free and paid, to get parallax to your site. Currently Webflow allows you to fix your bg images, but that is not really parallax, and to get a parallax effect, you need to use some custom code on your site. It is definitely doable, provided you integrate the jQuery plugin you select properly.

We do not support custom code, but check out the links that @PixelGeek mentioned, and if you are looking for some jQuery plugin for parallax that works, you can search on the internet, there are several that are free, and others that are very good that cost like 10 bucks... so what you get is up to you, Webflow will handle it...

There are also many things you can do with Parallax, so if you just want background scroll on page scroll and have an offset effect, that is easy while complex parallax take time to create and a fair knowledge of coding/javascript. So not all people will make their parallax equally smile

Here is an article about using and adding custom code, which may help while you experiment with different parallax plugins:

http://help.webflow.com/adding-custom-code

Cheers, Dave


#7