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:
- bind each section, sprite and background to the window scroll event
- record the original offset of the element
- divide the scroll position by the desired speed of the element and discount the original offset value
- apply varying speeds to elements as desired to create the parallax effect
- for the nikebetterworld specific effect where the background image overlaps that’s done with
background-attachment: fixed
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!