jQuery raindrops (text)

I made a raindrop type effect for my website. Obviously, one could tweak it to get it closer to the desired effect one would be looking to achieve, but…

Website: http://wookets.com/
Archive: http://wookets.com/archive/wookets-com-july2011/

Everything is javascript, so you can right click and view the source.

I was having some major problems, but breaking everything out into distinct functions seems to have alleviated those… Notably the generating and the adding of droplets and the dropping.

There are many more small tweaks I could do…
- Getting rid of the animation to move elements (recycle) to the top of the page. (This should just be a straight move, if you see flickers of words in chrome, this is most likely why)
- The effects could be tweaked to be a bit smoother.
- The fact that everything drops at once at the start
- The resizing of the window… It will eventually handle height resizing, but it doesn’t attempt to handle width resizing.
- Also note that I’m just changing the font color for the words. I wanted to avoid the CPU burden of doing an alpha mask. I suppose I could use some z coords for this as well, to avoid darker letters appearing before the white letters (but I kinda of like the effect)

Take and use as you will.

Published by and tagged Code using 220 words.