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:
Part One – How to create a parallax scrolling website
A detailed explanation of the Parallax Scrolling Effect using Skrollr.js
Part Two – Adding one page website navigation
Learn how to add a one page website navigation using jQuery Waypoints.
Hope you enjoy the tutorial, we aim to post a few more useful tutorials and links in the near future.