Note before we fire off the animation we have to reset the backgroundPosition within the JavaScript. This requires the use of the backgroundPosition plugin for jQuery, as out-of-the-box jQuery can’t animate the backgroundPosition property. But in this new JavaScript version, we’ll be overriding those and animating those values instead.

The percentages are what make the parallax effect work normally. The background images are repeating and set with percentages. īackground: url(./images/background.png) repeat 5% 5% īackground: url(./images/midground.png) repeat 20% 20% īackground: url(./images/foreground.png) repeat 90% 110% While Paul’s example is ideally how this type of effect will be done in the future, I thought it might be cool to toss a little JavaScript in the original and get an auto-moving version out there that should work in all browsers*.Įach “layer” is just an absolutely positioned div that covers the entire screen. Paul did an awesome job and the demo works great, but of course because it uses the proprietary css extention, it only works in very modern WebKit based browsers (Safari 4 and Google Chrome). He used the extremely cool -webkit-transition attributes to make the parallax effect move without needing to resize the browser window or use javascript. Recently, Paul Hayes took that example and ran with it. In that original demo, the only way to see the parallax action take place was resize the browser window. As a quick review, parallax is that effect where there are different layers of backgrounds that all move at a different rate creating a very unique 3D effect (think Sonic the Hedgehog).

A while back I did a little demo on parallax backgrounds.

Parallax css absolute