Yelotofu

In our recent jQuery HK meetup we explored the technic behind the parallax effect using Nike Better World as a reference for our live coding session.

The core idea of the effect is:

1. bind each section, sprite and background to the window scroll event
2. record the original offset of the element
3. divide the scroll position by the desired speed of the element and discount the original offset value
4. apply varying speeds to elements as desired to create the parallax effect
5. for the nikebetterworld specific effect where the background image overlaps that’s done with background-attachment: fixed

Here’s what we came up with.

N.B. Sorry about the Angry bird theme for those who try to run the script. That’s quite a big hit over here for Kongers of all age groups!