How To Animate Background To Move Around Car

A while back I did a little demo on parallax backgrounds. As a quick review, parallax is that event where in that location are different layers of backgrounds that all move at a different rate creating a very unique 3D consequence (remember Sonic the Hedgehog). In that original demo, the only mode to come across the parallax action accept place was resize the browser window.

Recently, Paul Hayes took that case and ran with it. He used the extremely cool -webkit-transition attributes to brand the parallax upshot move without needing to resize the browser window or use javascript. Paul did an awesome chore and the demo works great, merely of grade 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 volition be done in the time to come, I thought it might exist 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>              

                #groundwork { 	background: url(../images/background.png) repeat 5% v%; 	position: absolute; 	top: 0; left: 0; correct: 0; bottom: 0; 	z-index: 100; }  #midground { 	background: url(../images/midground.png) echo 20% xx%; 	position: absolute; 	top: 0; left: 0; right: 0; bottom: 0; 	z-alphabetize: 200; }  #foreground { 	groundwork: url(../images/foreground.png) repeat 90% 110%; 	position: accented; 	superlative: 0; left: 0; correct: 0; bottom: 0; 	z-index: 300; }              

The groundwork images are repeating and gear up 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 employ 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"> 	$(part(){ 	 	  $('#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 inside the JavaScript. Weird… but it'south a requirement for the plugin to work properly.

Extending the length of the animation

Those big numbers in the animation office (east.1000. 120000) stand for thousandths of a second. So 120000 = 120 seconds = 2 minutes. Changing those numbers y'all can extend or shorten the length of time of animation you get. It'south not infinite though… There may exist a mode to get that done, I merely didn't recall it all through. Perhaps abstracting the animation out to a function that could be called and then called over again during the callback (or something).

*The parallax affair is highly dependent on transparency. If you demand information technology working in IE 6, check out the Unit PNG fix or the DD_belatedPNG.

Source: https://css-tricks.com/auto-moving-parallax-background/

Posted by: simsthicalin.blogspot.com

Share this post