Grow your CSS skills. Land your dream job.

Auto-Moving Parallax Background

Published by Chris Coyier

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*.

 

View Demo   Download Files

 

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

  1. That’s a nice little trick, though the animation is slightly jerky as I view it. I’d suggest that it might be an effect that would work better with a smaller background image – e.g. used to animate something like the leaf effect at SilverBack.

  2. Parallax is just really cool. If you think so too, make sure to check out this awesome jQuery plugin: http://webdev.stephband.info/parallax.html . It allows making the animation based on mouse movement – just check out the demos.

    Anyway, nice example Chris. Don’t really see it actually be used in any webdesign (since it’s way too much over the top), but might be fun for some small stuff.

    Keep up the good work!

  3. Nile
    Permalink to comment#

    Cool. :D Hopefullly no client will want this though!

  4. I think that this is neat, but should be used extremely sparingly. The animation was slightly jerky for me, and I noticed that my processor shot up to 100% usage.

    For a processor that is around 3 GHZ, that is a lot of power that this background leeches.

  5. Brian
    Permalink to comment#

    I’m running the new Safari 3 Beta and it seems to render and run very well, considering I’m on a 4 year old mac! Good to see new ideas

  6. Bill
    Permalink to comment#

    Gimmicky

  7. Shame it doesn’t support support MF.

  8. Very cool – Thanks – Definitely uses a lot of CPU to those who plan on using it.

  9. Hmm… Only Safari 4? I am on Safari 3.2.1 and… it works!

  10. Sweet concept. I think the point is that it can be done, but not necessarily with stars. I think of clearleft’s preview site for Silverback. It would have been neat if the leaves slowly moved back and forth. Thanks for sharing.

    I was getting a problem when I had to scroll the page: the background didn’t scroll and a white bar appeared. I just changed your background:absolute statements to background:fixed and the problem went away.

    • I see the same thing happening (using Chrome). The background is only 100% of the viewport at the time that the page loads. So if you don’t have you’re browser maximized at loading, you get the white bar when scrolling down.

  11. Are you ot of your fing mind1?!?!?!?!?!? WHY IN THE WORLD WOULD ANYONE USE THIS?!?!?!!? This is by far the most useless thing I have seen, it is an insult to the hard work put in by a whole lot of professional web designers and developers to rid the internet of this crap but noooo, some dumb fuck always comes along and promotes crap like this. Please oh please shut down your site, we are begging you

    • I love it when you stop by to comment Razvan, it’s always so enlightening.

    • Jeff
      Permalink to comment#

      Lol, love to see that the archetype of “The angry white man” really exists :P

    • Some people must live very stressful lives.

    • Alex

      I think it’s great.

      Obviously a demo has to be huge and fullscreen so you get the full effect, but if anyone thinks that you just ‘copy and use’ resources like this, then you’re the ones that are wrong.

      This could be implemented in a number of ways, most of them more subtle and very tastefully.

    • Funny hearing about being a ‘professional’ coming from the guy who’s site is shut down…

      This is truly an awesome effect and I can see the potential for use (and abuse) of it. The potential for creatively using this to make very nice effects without relying on Flash to and a bit of punch to a site is great.

      I really don’t understand the people that are complaining about CPU usage though. I’m working on a laptop with Vista and not experiencing a slowdown at all.

  12. davelk
    Permalink to comment#

    @Razvan
    try checking out more than one article and your find out that this site is a great resource. Also, no one expected you to put fucking stars in a full screen background, it’s called experimenting to see whats possible (in this case using a parallax effect). Maybe if you used your imagination you could think of ways in which this could be used creatively.

  13. LOL @ Razvan.

    I would tend to agree, I like your work however this is something I don’t think I would implement. Thanks for your hard work though.

  14. bennythemink
    Permalink to comment#

    nice trick, i think it could add value to your site if you use it wisely and sparingly. thanks for letting us know about it anyway

  15. yep, it’s cool, but quite useless….I don’t think anyone with a sane mind would publish a site with such a background :)

  16. I think that is wicked. And while the example is maybe not something you will find in the real world the technique will be used no doubt by very talented designers that you will end up looking up to again.

  17. Jeff
    Permalink to comment#

    Really nice effect, but i just came accross a small issue, if the page has to scroll, you miss a part of the background. Didn’t tried anything, but putting the backgroud divs with a fixed position instead of absolute might do the trick

  18. Tim
    Permalink to comment#

    Maybe he should use the Canvas Tag for an effect like this, that should be faster and leaves you a lot more options …

  19. Krzysztof
    Permalink to comment#

    this “little trick” eats my whole CPU resources :-)

    • DaNieL
      Permalink to comment#

      hahahaha agree, nice to see but not in line with ‘accessibility’

  20. Parallax is so much fun! There should be more stuff like that on the internet (I was always a fan of animated horizontal rules as well, when are they going to make a come back?)

    I made a header out of it just as a tribute, and put it on a client site as a kind of joke during development, then they wouldn’t actually let me take it off they loved it so much:

    http://wearerealgold.com/

  21. Awesome techniquie. I absolutely love the technology. It can come handy in lots of projects specially related to cosmology.

  22. abhi
    Permalink to comment#

    lovely work Chris !!
    Awesome thing to implement…
    but its great if it work along mouse movement as I have seen !!!
    anyway keep up the good work comming, cheers and regards !!

  23. Hi Im running the Javascript Innerfade file that I learned from nettus.(transitions from one image to another). I tried combining that, with this nifty little trick but it doesnt seem to like that. It will only do one or the other. I did some testing and I noticed depending on the hierarchy is wheter it reads it, almost like cascading.

    If its above the files, the innerfade js file reads, if its below the inner fade js file. Then it works, but then all my images do not transitions, and just show.

    I know this isnt in the scope of this article, but if you have any advice on how I can fix it so that my innerfade work aswell as the background position animation trick that would be great. Thx !

  24. http://studio.production.com/

    CHECK THIS OUT i used it over here ..
    thank you very much its really looks impressive

  25. karn
    Permalink to comment#

    how can i extend this to complete page so if i scroll i can see the effect down there also?

  26. Ryan McBride
    Permalink to comment#

    Not working with the latest version of jQuery. Swapping in an older version works fine though.

  27. M
    Permalink to comment#

    Dear Chris,

    I frequent your site a lot and I have to say this tutorial has given me the excuse to design space-y websites; which is awesome.

    Here is one way I used it!

    Thanks for everything!

  28. VahidSeo
    Permalink to comment#

    Well, I’ve made a simple parallax effect on mouse movement, without any jQuery plugins, and with pure JavaScript. It’s on codepen:
    http://codepen.io/vahidseo/details/qahfL

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".