A while back I did a little demo on parallax backgrounds. 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). In that original demo, the only way to see the parallax action take place was resize the browser window.
Recently, Paul Hayes took that example and ran with it. He used the extremely cool -webkit-transition attributes to make the parallax effect move without needing to resize the browser window or use javascript. 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).
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*.
How it Works
Each “layer” is just an absolutely positioned div that covers the entire screen.
<div id="background"></div>
<div id="midground"></div>
<div id="foreground"></div>#background {
background: url(../images/background.png) repeat 5% 5%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 100;
}
#midground {
background: url(../images/midground.png) repeat 20% 20%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 200;
}
#foreground {
background: url(../images/foreground.png) repeat 90% 110%;
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
z-index: 300;
}The background images are repeating and set with percentages. The percentages are what make the parallax effect work normally. But in this new JavaScript version, we’ll be overriding those and animating those values instead. This requires the use of the backgroundPosition plugin for jQuery, as out-of-the-box jQuery can’t animate the backgroundPosition property.
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.backgroundPosition.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#midground').css({backgroundPosition: '0px 0px'});
$('#foreground').css({backgroundPosition: '0px 0px'});
$('#background').css({backgroundPosition: '0px 0px'});
$('#midground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 240000, 'linear');
$('#foreground').animate({
backgroundPosition:"(-10000px -2000px)"
}, 120000, 'linear');
$('#background').animate({
backgroundPosition:"(-10000px -2000px)"
}, 480000, 'linear');
});
</script>Note before we fire off the animation we have to reset the backgroundPosition within the JavaScript. Weird… but it’s a requirement for the plugin to work properly.
Extending the length of the animation
Those big numbers in the animation function (e.g. 120000) stand for thousandths of a second. So 120000 = 120 seconds = 2 minutes. Changing those numbers you can extend or shorten the length of time of animation you get. It’s not infinite though… There may be a way to get that done, I just didn’t think it all through. Perhaps abstracting the animation out to a function that could be called and then called again during the callback (or something).
*The parallax thing is highly dependent on transparency. If you need it working in IE 6, check out the Unit PNG fix or the DD_belatedPNG.
Comments