Demo - How to create a parallax scrolling website

Fade out elements before
they leave viewport

This slide moves background image at a slower speed then the page scroll. Text is fading out to opacity 0 at 106 pixels from the top.

Fade me in and out

Here we are changing the background color from blue to black. Text is fading in at 206 pixels from the bottom and fading out 106 pixels from the top.

Fixed element fading in and out

Text is fixed 206 pixels from the top, while the background is moving 40 pixels to the left.

Or did you think that the scooter is driving off?

Curtain effect while you scroll

 

Fixed element fading in and out

Showcase your beautiful images before blurring the scene and fading in your headline.

The End

Not enough parallax goodness? Let me know in the comments or hit me up at @ihatetomatoes.