Sep 16

Making it Rain a cool little Jquery trick

So, I’ve been refreshing myself on Jquery lately. This is one of the many programming languages you should know as a web designer. Although not required, it does put a bunch of advanced effects into reach for people who want to dig it out a little bit.

To sort of keep current on how JQuery works and the syntax, I sat down and developed this neat little Rain Box as a mini-project. JQuery can do a lot of very useful transforming of text and other page elements. This one though is more on the creative or “visual effects” side. It turned out pretty nice and only took about 30 minutes to create.

This uses NO Flash Animation.
No PHP, Coldfusion, .net, etc
It is just one DIV tag, one image (the drop), and a little bit of JQuery code.

Download the zip file here if you want to see how it works.

This is the rainbox. Completely done using JQuery (Javascript). Here’s another “Real world” example: (coming soon)