jQuery Sequential animations revisited…real world example
I am thinking of redesigning my main website using my JC Designs cog logo that you see at the top of this blog. I thought to myself, wouldn’t it be cool if I animated it a little? In fact, why not do something that I did a few posts ago (can view post here), and move each cog left while fading in. Whatever I come up with for the design, won’t look like this blog, but I do want to keep the logo. So I did a test run to see if it would work.
Click here to see what I came up with.
Pretty slick, considering about 6 months ago, I would have had to do something like this in flash. Now? Plain old CSS, HTML, and some jQuery. Nice and easy!
If you didn’t read the post I did on this before, here is the html:
<div id="container">
<div id="cog1"></div>
<div id="cog2"></div>
<div id="cog3"></div>
<div id="cog4"></div>
<div id="cog5"></div>
</div>The jQuery I had to change up a little, because not only do I want the cogs to fade in sequentially, I also want them to move in to the left. And to make things harder, I need each cog to move a different amount than the previous cog. Here is the javascript, and then I’ll explain it.
var cogs = $('#cog1, #cog2, #cog3, #cog4, #cog5').css('opacity', 0); i=0; leftAmount = 0; function cogMovement () { $(cogs[i++]).animate({ 'left': 63 * leftAmount++, 'opacity': 1 }, 1000, arguments.callee); }; cogMovement();
The cogs variable could have been written differently if I had wrapped all the cogs in a wrapper, but I didn’t. This was a test run, and that isn’t the important part. The difference in this bit of code is that there is a second variable – leftAmount. So what happens here you ask?
This. The cogMovement function is called, and ‘i’ is equal to 0. So the first cog in the returned array is cog1, which gets animated left 63px times leftAmount (0 the first time). The opacity changes to 1, which is the fade in, since they all start at 0. I want the two effects per cog happening at the same time, so that it fades as it moves. Therefore I am using opacity instead of fadeIn(). If I did fadeIn(), and anything else, it would have faded THEN moved. The animate ensures that it happens together.
Again, the arguements.callee (if you read my other post, which you should!) calls the function again. This time ‘i’ AND leftAmount get incremented to 1. So cog2 moves 63px times 1 (63px). Cog3 moves 63px times 2…and so on, until the function gets through the cogs array. What I find awesome about this, is that it requires so little javascript to make it happen.
Now, the next time you go to use Flash for something simple like this, I will come to your house and smash your computer. Shame on you. I like Flash as much as anyone, but when I need to do something like this, I am going to avoid it as much as I can. Hope this made you think of doing something cool on your next project!
Coupon Code: webmachine
jQuery junkBox
.clone();
This method creates a copy of the set of matched elements. Below, it would create a copy of the unordered list in an element with an id ‘nav’. Its up to you to put it somewhere!
$('#nav ul').clone();
Tags: jQuery
Very nice.
My concern is that the animation takes a bit too long. I would suggest to decrease the animation time, but that would cause the animation to look spazzy because of the distance of the animation.
So I’d suggest decreasing the animation time and having the cogs come in from the left, since it’s closer.
Also, do you have a way to prevent that animation from happening every time someone refreshes the page?
Thanks! This was test to see if I could get it to work. I wasn’t sure I could get the positioning correct or not. If I do use this, I will indeed speed up the animation, but put a slight delay in front so it doesn’t fire before the background header image is done loading. Out of curiosity, why would I want to prevent it from firing on refresh? This would be on the home page only anyway. I wouldn’t want this on any of the interior/post pages.
It’s just an idea I hold from my experiences in the classroom.
Our teacher would be use a powerpoint to go through notes and would use some cheesy slide transitions and animations before the actual content showed up. But it wasn’t too annoying.
However, In the event that she needed to go back to that slide with all the animations to reference the content, we’d have to sit through all those animations again, and you can quickly get bored in those few seconds since you know exactly what’s going to happen (and teachers are fighting for students’ attention enough as it is.)
The way the teachers worked around this was by pressing the spacebar and skipping the animations that were occurring when going back to a slide with animation. They knew that it was unnecessary to see the animations the second time.
My advice is to let them see it one time so you can show off that you can do it. After that, disable it for the rest of their stay on the site.