Parallax Containers

For those unfamiliar with the parallax effect in web design, Wikipedia has a good definition:

Parallax scrolling, also known as “asymmetrical scrolling,” is a technique in computer graphics and web design where background images move by the camera slower than foreground images, creating an illusion of depth in a 2D scene and adding to the immersion.

I built a plugin that supports a background container with multiple foreground containers — all with unique scrolling speeds and directions for a WordPress theme at Vanderbilt University. The effect can, sometimes, be a little choppy due to the continuous burden placed on the browser during scrolling but I am hoping to make improvements in the future.

View the Demo