Rain Effect With Javascript?

Hello

I am just starting to get into Javascript and working my way through Sitepoints Simply Javascript book.

There is a javascript effect I would like to use on a webpage I am making, it is to give the impression of rain, much like the DS Rain script

However that gives the effect to the whole page, I need it applied to just one of my divs so it looks like it’s raining on a character I have inside that div

Would this be hard to accomplish? Is it worth trying to build my own script or would I be better off using a pre built one as it is a complex task?

The simplest way would perhaps be to not use JavaScript at all, but rather use an animated GIF as a background image on the DIV. Those kinds of effects in JavaScript usually require absolute positioning of the DIVs. Absolute positions are with respect to the upper left corner of the entire page.

I didn’t think of that, but wouldn’t there be a stutter delay with the gif while it loads?

Make a small non-interlaced GIF that tiles seamlessly rather than a large one.

OK, I hadn’t made an animated GIF before. I found this tutorial (http://www.planetphotoshop.com/animated-rain.html) which is basically similar to the effect I wanted to achieve however there were 2 problems that I ran into

  1. The rain gif isn’t transparent, it shows a black border

  2. The file size of the completed GIF was massive, nearly 6MB

Not sure where I am going wrong as not done this before?