One Page Love Logo
  • Published: March 13, 2014
  • Category: Resources
Create a One Page website with the free Layers theme and WordPress. See Tutorial

How to achieve a Parallax Scrolling effect with Petr Tichy

There is no question Parallax Scrolling is a very popular trend in website design and especially one page website design. We have featured over 700 Parallax Scrolling One Page Websites.

What exactly is Parallax Scrolling?

In simple terms, I’d say Parallax Scrolling is the effect caused when a layer in a website moves at a different speed to another, normally activated as you scroll down but sometimes activated as you hover your cursor.

But here is what the Wikipedia boss says:

Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines. The term is derived from the Greek παράλλαξις (parallaxis), meaning “alteration”. Nearby objects have a larger parallax than more distant objects when observed from different positions, so parallax can be used to determine distances.

Why the universe image you ask? A very common example of the Parallax effect is the background wallpaper on the iOS7 upgrade. When you tilt your phone, you notice the stars in the foreground move at a different speed to the background creating depth.

Who is Petr Tichy?

In December 2013 we interviewed Petr Tichy who created the unique and impressive Merry Chistmallax one page website. He has been keeping busy and now brings us this two part series on how to achieve a Parallax Scrolling effect in your one page website:

Update: Petr has just launched a comprehensive premium Parallax Scrolling Master Class where he teaches us how to build a parallax scrolling one page website from start to finish including 3hrs of video and in-depth documentation. Continue with the free quick course below:

Part One – How to create a parallax scrolling website

A detailed explanation of the Parallax Scrolling Effect using Skrollr.js

View Part One Tutorial
View Part One Demo

Part Two – Adding one page website navigation

Learn how to add a one page website navigation using jQuery Waypoints.

View Part Two Tutorial
View Part Two Demo

Hope you enjoy the tutorial, we aim to post a few more useful tutorials and links in the near future.