Parallax Scrolling Master Class by Petr Tichy

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

Ready to step up your parallax game? Learn ScrollMagic from these free templates:

5 Free ScrollMagic Templates

Or go to Part 2, where we will add one page navigation.