This plugin was born partly with my upcoming portfolio and because I generally hate those fixed backgrounds. Moving it just slightly would make it so much nicer, but also adding depth to the design. My example down below is very basic, I'd love to see someone adding more levels of depth while user is scrolling. I'd actually might do that myself…

How to use it

It's fairly easy to use, with one parameter you can set. And remember, it's currently only working for horizontal scroll, but it should be fairly easy to add or change for a vertical scroll as well. Maybe in the next version. This is how you implement it

// with value
$(document).scrollDepth({delay:.5});
// without value
(default delay; 0.1) $(document).scrollDepth();

With the parameter "delay" you set a value from 1 to 0. Default value is 0.1, meaning the background will move one tenth of the foreground. The higher value, the faster it will go.

Demo of depthScroll.js

Download depthScroll.js