jQuery background scrolling effect tutorial
So what is this Javascript scrolling background image thing about…?
This tutorial gives the impression of a scrolling background on text, but of course it uses images to achieve it. However you may implement it, the principles remain the same:
1) A continually scrollling background image using javascript
2) A static overlay image with transparency
3) Random starting positions for both images allowing for a unique appearance on every page load, again using javascript.
Step 1: What you need in your toolbag…
This tutorial should be fairly easy to follow for all web designers / developers, however a working knowledge of XHTML & CSS is assumed throughout the tutorial, as well as experience in hooking up jquery and javascript to your web designs.
What you are going to need:
A background image which will scroll. This is the coloured gradient with texture image in our example.
An overlaid transparency image (this will be much taller than the viewable area).
jQuery core library, .png fix for older versions of IE, javascript code to put the whole thing into motion.
Ok, there’s your pitch, now its up to you to hit it out the park… Lets get building!
Step 2: Structure & the images
The structure of the element is basically two divs positioned one atop the other. The outermost div will have position:relative; applied to it and will have the coloured gradient as its background image. The second div will be given position:absolute; in order to overlay it exactly where we want it. This second div will have the transparent .png image as its background image, however using javascript we will randomise the image’s vertical position, creating a different image on every page load. Both divs will have fixed width and height in the example.
Go ahead and create an image for each. The width of both should be the same as your container div (in the case of the example on the demo page, both images are 899px wide). The height of each image is completely up to you – the taller the gradient background, the slower the transition will be. The shorter, the faster and more obvious. For the overlaid .png, use whatever height you like. Obviously it should be at least as tall as the container div, and the height it is will dictate how much variation you will see in starting positions as there will be more of them! The images used in the example are provided in the .zip download.
Key Note! In the case of the gradient background image, the top and bottom of the image should seamlessly blend into one another. That is to say if you produced an image, printed it and then rolled it into a cylinder so that the top and bottom edges meet, the join between the two should be seamless, without a noticable step. A quick way of doing this in Photoshop is to copy the top portion of your gradient and paste at the bottom. Flip it vertically and blend into the rest of the image.
Please do bear in mind the size of your images in terms of page load – keep them as small as you can wherever possible – we wouldn’t advise using huge images for full width backgrounds on the body of your designs…
Step 3:The XHTML & CSS
Start off by downloading the latest copy of the jQuery core library. This will be the engine that powers our new element, but we will need a little more code to act as a steering wheel. We’ll come back to that later. Link the jquery and custom.js into your header in the usual way. Should you want to fix the ie5.5/6 transparency failing, you may also want to include a .png fix javascript file (Drew Diller’s Solution comes recommended).
<head><link rel=“stylesheet” type=“text/css” media=“screen” href=“css/style.css” /><p></p><script type=“text/javascript” src=“js/jquery-1.3.2.min.js”></script>type=“text/javascript” src=“js/jquery.pngfix.js”></script><script type=“text/javascript” src=“js/custom.js”></script> <scrip t <script> DD_belatedPNG.fix(’.png-fix’); </script> </head>
The xhtml is as straightforward as can be, using just two divs as outlined earlier. You can add any further content you want into the content of these divs. Adding content would also make the setup of the element semantically correct, not using empty divs, and using backgrounds as backgrounds! For illustrative purposes, this web design element example contains a further div with styled text within.
<body><div id=“box”><div id=“overlay”><span class="red">You can add further content on top of your design into these divs here.</span></div> </div> </body>
Apply the following CSS attributes to your two containing divs. Obviously you will need to set the width and height according to the images you have produced.
#container {background:url(../images/gradient.jpg);position:relative; width:899px;ion:absolute;height:358px; } #overlay { posi t top:0; left;0; width:899px; height:358px; background:url(../images/overlay.png); }
Step 4: And finally, the javascript…
$(function() {// Define the height of your two background images.//The image to scroll//The image to overlavar backgroundheight = 2000; y var backgroundheight_two = 1000;mages’ starting positions offset = Math.round(Math.flo// Create a random offset for both ior(Math.random()* 2001)); offset2 = Math.round(Math.floor(Math.random()* 1001));e offset. offset = (offsefunction scrollbackground() { //Ensure all bases are covered when defining t ht < 1) ? offset + (backgroundheight – 1) : offset – 1; // Put the background onto the divunction to loop when it reaches the end of the image setTimeout(fun$(’#container’).css(“background-position”, “50% “ + offset + “px”); // Enable the fction() { scrollbackground(); },100 ); } // Initiate the scroll scrollbackground(); // Use the offset defined earlier and apply it to the div. $(’#overlay’).css(“background-position”, “50% “ + offset2 + “px”);<br> });
The above is the contents of custom.js – you will need to modify this slightly to fit your own needs. Firstly, the height of your two images should be entered in to the two ‘backgroundheight’ variables (in pixels). The first being the coloured gradient to be animated and the second, the overlaid static image.
Secondly, take the height of these two images and add 1. Insert these numbers to create a randomised starting position for both images in place of ‘2001’ and ‘1001’ above.
You can change the scrolling speed by altering the value ‘100’, though it seems 100 is optimum and altering this may not produce an animation that is quite as smooth. Finally change ‘#content‘ and ‘#overlay‘ to the IDs of your containing divs if you have decided to change them.
Step 5: Have a cookie!hat’s it! Putting all these steps together will result in the effect you see on the demos page. Feel free to download the .zip below and play around with our version yourself, though please do not use our images or design as your own. The fun will come from creating something new and truly unique in your web design so take these tools and show the world what you’ve got!T
You can download the demo code in the following link :
Demo Code : http://charansoft.gofreeserve.com/downloads/demos.zip
Tags : Jquery scrolling, Background image scrolling
Comments
Post a Comment