Thinking Outside The Box With jQuery

Thinking Outside The Box With jQuery

Is it waves ahead of Flash?

NOTE: Stick through to the end of the article, and I’ll give you a cool link for a reward!
No, but it can still do a lot of cool crap. Today I was noodling around and somehow this idea popped into my head. Normally, at my current place of employment, we build animations using Flash. Butterflies fluttering around, fades and what-not, hell I even did a water ripple effect once. I thought, what if we could do some of the simple banners that are just plain fades and use jQuery instead of Flash to do everything. My initial idea was, what if a client has a photo of a beach, and he wants the stupid water to move. Could I do something in jQuery instead of having to rely on Flash?

The set up

My HTML for the demo is easy: a container div, 1 div with the original image, and 2 additional divs with only the water section of the image. 3 divs, 2 seperate images. The images are pretty large, because in this demo I was going for a rough effect rather than bringing the size down.


The jQuery is rather simple, too. Two animations in a loop…1 on each of the ‘just water’ images. The first animation moves it left and back, while the second moves it down and up. Here it is for you to look at:

function waves () {
		for(i=0; i<1000; i++) {
			$('#two').animate({
				'top' : +15,
				'opacity' : .2
			},2000).animate({
				'top' : -2,
				'opacity' : 1
			},2000);
			$('#three').animate({
				'left' : -5,
				'opacity' : .2
			},2000).animate({
				'left' : 0,
				'opacity' : .6
			},2000);			
		};				
	};
	waves();

I’m sure there is a better way to do that, but I am going for getting you thinking right now, not prettiness. I will assume you at least know enough about jQuery to understand what I am doing there, because there isn’t anything tricky or awesome going on.

View Demo

Thrillsville, but who really cares?

The demo is more to show that you can do things you normally wouldn’t with jQuery. Sure you can build a cool slider, or drop down, or form validation, etc. The next time you have to do some little bit of animation though, maybe you will think about using jQuery instead of Flash. For instance, the butterfly thing I mentioned. All I did was create a movie clip in Flash that had different states of wing flappage. You could very easily do that with jQuery by doing a simple animation like my waves, only use an image sprite. Shift the sprite over every fraction of a second and you would have the same effect going.

After creating this moving water bit, I know I’ll be thinking outside the box, and see if maybe jQuery will fit the bill more easily. Please take note that I am not against Flash at all. I like using it, and there will be times where that is the only route to get a specific thing accomplished. I’m not on some crusade to get rid of it. All this was for, was to get you to think about the possibilities if you have jQuery at your disposal.

Now onto your reward! Check out this link, when you get there you’ll know what to do. Can’t use it in IE though, but I think they’ll get to that someday.

Coupon Code: webmachine

Tags: ,

Leave a Reply