/* Author: Ian Lunn Author URL: http://www.ianlunn.co.uk/ License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/. Dual licensed under the MIT and GPL licenses: http://www.opensource.org/licenses/mit-license.php http://www.gnu.org/licenses/gpl.html */ $(document).ready(function() { //when the document is ready clouds1 = 300; //create a variable that contains the starting position for bg-city.png clouds2 = 2000; //do the same for bg-hills.png clouds3 = 4500; //do the same for bg-mountains.png clouds4 = 5200; //do the same for bg-mountains.png clouds5 = 7200; //do the same for bg-mountains.png clouds6 = 1000; //do the same for bg-mountains.png //change the css of the element to give it multiple backgrounds using CSS3. This contains the variables we just worked out for each individual background $('body').css({"background-position" : "-300px " + clouds1 + "px, 100px " + clouds2 + "px, 500px " + clouds3 + "px, 0px " + clouds4 + "px, -500px " + clouds5 + "px, 250px " + clouds6 + "px, right top"}); function Move(){ //set up a function to be called whenever the window is scrolled or resized pos = $(window).scrollTop(); //get the position of the scrollbar clouds1 = 300 - pos * 0; //create a variable that contains the starting position for bg-city.png clouds2 = 2000 - pos * 0.15; //do the same for bg-hills.png clouds3 = 4500 - pos * 1.1; //do the same for bg-mountains.png clouds4 = 5200 - pos * 0.2; //do the same for bg-mountains.png clouds5 = 7200 - pos * 1.1; //do the same for bg-mountains.png clouds6 = 1000 - pos * 0.5; //do the same for bg-mountains.png //change the css of the element to give it multiple backgrounds using CSS3. The variables contained will change for every pixel the window is resized or scrolled $('body').css({"background-position" : "-300px " + clouds1 + "px, 100px " + clouds2 + "px, 500px " + clouds3 + "px, 0px " + clouds4 + "px, -500px " + clouds5 + "px, 250px " + clouds6 + "px, right top"}); } $(window).bind('scroll', function(){ //when the user is scrolling... Move(); //call the Move() function }); });