Jan 112013
 


http://www.dynamicsights.com/cssscrollback.php

Transparent Image

Notice the image scrolling above? This is done with a simple Javascript and CSS… and a transparent PNG on top.

This is not a pure CSS solution, since it does require some JavaScript, however, the amount of scripting needed is minimal.

First, start with series of images and stitch them together in your favorite program. I use Adobe Illustrator, mainly because it is much more convenient to work with a document with a large number of layers.

Next, create a web page and create a div and give it the ID of scroller.

<div id=”scroller”> </div>

Now Create the CSS Style for this Div. I hard coded the height, but you don’t really have to.

#scroller {
background-color: #424242;
padding-left: 40px;
height: 150px;
background-image: url(images/beachbanner.jpg);
background-repeat: repeat-x;
}

Next, create two JavaScript Functions. I create global values for the image size and image start position (by attaching the variables to the Window Object). If you prefer, you can pass the items as parameters to the MoveBackGround function, although I always hated juggling the parentheses. Also, it is always better to use an external JavaScript File, but sometimes I just don’t bother, especially during testing.

At the end of the StartMove() function you make a setInterval() call to the MoveBackground() Function. With setInterval(), you tell JavaScript to run a specific function every x milliseconds (1 millisecond=1000 seconds). So the MoveBackGround function runs every 50 milliseconds.

The MoveBackGround function is the simple code that moves the background and then resets it back to 0 when the width (window.cssmaxWidth) is reached.

<script language=”javascript”>

function StartMove() {
var cssBGImage=new Image();
cssBGImage.src=”path to your image.jpg”;

window.cssMaxWidth=cssBGImage.width;
window.cssXPos=0;
setInterval(“MoveBackGround()”,50);
}

function MoveBackGround () {
window.cssXPos=window.cssXPos+1;
if (window.cssXPos>=window.cssMaxWidth) {
window.cssXPos=0;
}
toMove=document.getElementById(“scroller”);
toMove.style.backgroundPosition=window.cssXPos+”px 0px”;

}
</script>

Lastly, you need to attach the code below to your body onload event (or any image load if you prefer). IF you attach it to an image, make sure the image loads before the Div.

<body onload=”StartMove()”>

Finally, if you want, you can place an image over the scrolling background. Again, I use Illustrator to create a layered Image. I create the background (the yellow shape) and set the transparency to 45%. Then I add the text at full opacity (100%). I save the whole thing as a transparent PNG-24.

 Posted by at 6:09 pm

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)