Great jQuery text silhouette animation

Monday, 18 October 2010


Going over some jQuery plugins today I came across this effect in a banner on this site that I thought was pretty cool. Btw, the plugin on that page is quite nice and will be even better after a few more releases (worth checking out as an aside).

The main idea is to have some black text on a white background (colors can change to taste) and then an image is animated over the top of the text which is the same color as the background (white) but with a transparent background. So that when the image passes over the text it creates a cool silhouette effect.

You can download the code here. You can see a working example in the site mentioned above.



As per the site linked above I also use 3 images to enhance the effect.

This could definitely be implemented a lot better (using multiple images to create a continuous stream as it currently stops after a period of time and some way to make the text selectable), but I'll leave that to you.

This effect is not something that would work on every site (think blinking text), but for some arty or monochromatic schemes I can see this fitting right in.

The code is quite straight forward:

<div id="text_cont">
   Some text
   <div id=\'cross_img\'></div>
   <div id=\'cross_img2\'></div>
   <div id=\'cross_img3\'></div>
</div>

Start with my text and three images.

Here is part of the css, you see the div with a white background and black text. Each of my images is almost identical, I offset them slightly using different top and left positions. Also in the jQuery I provide different speeds for the animation to try and create an overlapping effect.
#text_cont {
 background: white;
 color:black;
 font-size:120px;
 font-weight:bold;
 position:relative;
 overflow:hidden;
}

#cross_img {
 position:absolute;
 top:0px;
 left:0px;
 width:1800px;
 display:block;
 height:500px;
 background: url("../images/demo1.gif");
}

Here is the javascript:
$(document).ready(function(){
 $("#cross_img").animate({"left": -1800}, 150000);
 $("#cross_img2").animate({"left": -1800}, 120000);
 $("#cross_img3").animate({"left": -1800}, 90000);
});

You can see the different speeds as mentioned previously.

Hope you like it. If you use it anywhere I'd like to check it out.
blog comments powered by Disqus