randomised nice jQuery background scrolling effect

Home Image Effectsrandomised nice jQuery background scrolling effect

randomised nice jQuery background scrolling effect

14 years ago Views

23559

4563

Mark

randomised nice jQuery background scrolling effect

A continually scrollling background image using javascript
A static overlay image with transparency
Random starting positions for both images allowing for a unique appearance on every page load, again using javascript

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

<head>
    <link rel=“stylesheet” type=“text/css” media=“screen” href=“css/style.css” />
 
    <script type=“text/javascript” src=“js/jquery-1.3.2.min.js”></script>
    <script type=“text/javascript” src=“js/custom.js”></script>
    <script type=“text/javascript” src=“js/jquery.pngfix.js”></script>
    <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;
  height:358px;
}
#overlay {
  position:absolute;
  top:0;
  left;0;
  width:899px;
  height:358px;
  background:url(../images/overlay.png);
}

And finally, the javascript…

$(function() {
 // Define the height of your two background images.
           //The image to scroll
 var backgroundheight = 2000;
           //The image to overlay
 var backgroundheight_two = 1000;
 // Create a random offset for both images’ starting positions
        offset = Math.round(Math.floor(Math.random()* 2001));
        offset2 = Math.round(Math.floor(Math.random()* 1001)); 
 function scrollbackground() {
             //Ensure all bases are covered when defining the offset.
     offset = (offset < 1) ? offset + (backgroundheight – 1) : offset – 1;
  // Put the background onto the div
     $(’#container’).css(“background-position”, “50% “ + offset + “px”);
     // Enable the function to loop when it reaches the end of the image
     setTimeout(function() {
   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.

That’s it!

Tag: background, image scroller