Crafting an Animated Postcard With jQuery
Nicely illustrated banners are…nice. But why not add a little pizazz by using animation like Flash websites do?
Through Javascript web pages are becoming increasingly less static and all sorts of creative possibilities are opening up.
In this tutorial we will learn the basics of setting up a continuous animation which can be applied pretty much anywhere. Take a peek below to see an outline of what we’ll be learning today.
What You’ll Learn
- The art of looping animations using setTimeout()
- How to take advantage of the Easing plugin
- A new way to spice up your banner
The HTML
Laying down the groundwork is pretty simple, essentially we create a canvas (‘#content’) and center it with ‘#wrapper’ – pretty standard practice. The difference between this and the average layout lies in our use of ‘position:absolute’ to place each image, which is why there isn’t any real hierarchy to all the elements with images.
<div id="wrapper">
<div id="content">
<div id="sun"><img src="images/sun.gif"/></div>
<div id="cloud1"><img src="images/cloud1.png"></div>
<div id="cloud2"><img src="images/cloud2.png"></div>
<div id="cloud3"><img src="images/cloud3.png"></div>
<div id="raft"><img src="images/raft.png"></div>
<div id="raftripple"><img src="images/raftripple.gif"></div>
<div id="greetings"><img src="images/greetings.png"></div>
<div id="stamp"><img src="images/stamp.png"></div>
</div>
</div>
The CSS
Next up we will want to plug in all the CSS, I have included comments below to block out the importance of each style.
*{ margin:0; padding:0; }
body { text-align: center; background: #111; }
//Width should match that of the child element #content
#wrapper{ margin:0px auto; width:700px; }
//The canvas for our postcard, must be position:relative/overflow:hidden
#content{ position:relative; width:700px; height:300px; top:30px; overflow:hidden; border:5px solid #f5f5f5; background: url('images/scene_bg.jpg'); }
#sun{ position:absolute; top:10px; left:30px; }
//Note the negative left values that hide the clouds offscreen
//The z-indexes define how the clouds with stack on top of each other
#cloud1{ position:absolute; top:60px; left: -150px; z-index:5; }
#cloud2{ position:absolute; top:40px; left: -250px; z-index:4; }
#cloud3{ position:absolute; top:25px; left: -100px; z-index:3; }
//Our raft/ripple under the raft, z-indexes stack them accordingly
#raft{ position:absolute; top:220px; left: 312px; z-index:20; }
#raftripple{ position:absolute; top:220px; left: 309px; z-index:19; }
//The text and stamp both positioned off-screen and on top of everything
#greetings{ position:absolute; top:-51px; left: 200px; z-index:21; }
#stamp{ position:absolute; top:5px; left: 801px; z-index: 21; }
At this point in the game you should be looking at something pretty similar to this:
Get Your jQuery Ready
For those of you that aren’t as familiar with the whole jQuery scene we’re going to need to tag the following two lines into the <head> of the page:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script> <script src="jquery.easing.1.3.js" type="text/javascript"></script>
The first line calls jQuery, but the second calls the Easing Plugin, which might not be as familiar to you. We will be making use of it later in the tutorial, so for convenience sake, I have provided it in the downloadable files. If you’re one of those independent folks you could download it from the official site too, I won’t be offended.
The Basic Template for Looping an Animation
Below I have outlined the format for making a function that does a looped animation, in this case it is called the rather ambiguous name – ‘animate_element’.
function animate_element(){
$("#element").animate({left:"+=100px"},1000).animate({left:"-=100px"}, 1000)
setTimeout("element()",2000);
}
If we pay attention the the first line of code within the function, we can see that it runs two animations, one after the other.
$("#element").animate({left:"+=100px"},1000).animate({left:"-=100px"}, 1000)
The first of the two moves the element 100px from the left relative to it’s current location – as denoted by the ‘+=’. When that animation is complete the next will be triggered, which does the exact opposite and moves the element back to it’s starting location.
When the animations finish then we want to have the same function called again, so that they will be repeated. We do this via setTimeout(), which can trigger events based on a timer.
setTimeout("element()",2000);
The key point to notice is that the timer (2000 in this case) should be the sum of all the animation times in the previous line. This essentially will allow for each of the animations to complete (1000 + 1000), before restarting the function.
Creating Looped Animations for Our Postcard
After having just educated yourself in the setup for an animation, you should be be more than qualified to follow along in this next step, where we define a series of animation loops. Instead of doing a separate function for each individual animation, those that take the same amount of time to complete can be grouped together.
function sun_raft(){
$("#sun").animate({opacity:".7"},1000).animate({opacity:"1"},1000);
$("#raft").animate({top:"-=5px"},1000).animate({top:"+=5px"}, 1000);
$("#raftripple").animate({opacity:".1"},1000).animate({opacity:"1"},1000);
setTimeout("sun_raft()",2000);
}
function cloud1(){
$("#cloud1").animate({left:"+=850px"},10000).animate({left:"-150px"}, 0)
setTimeout("cloud1()",10000);
}
function cloud2(){
$("#cloud2").animate({left:"+=950px"},9000).animate({left:"-250px"}, 0)
setTimeout("cloud2()",9000);
}
function cloud3(){
$("#cloud3").animate({left:"+=800px"},6000).animate({left:"-100px"}, 0)
setTimeout("cloud3()",6000);
}
In the instance of the clouds, which will be constantly scrolling across the screen, after they travel the distance, they are reset to their initial location via an animation that takes 0 time (therefore instantaneous).
The raft portion of the postcard has two animations going side by side – The raft bobs up and down, while the ripple underneath fades in and out.
Putting It All Together (in a Function)
Now that we’ve defined the animations that will be looping let’s combine them all into a function that we can then call when the page loads.
function animation(){
sun_raft();
cloud1();
cloud2();
cloud3();
}
Wonderfully simple. Now instead of having to type out 4 different functions each time, we can simply call animation().
Adding One Time Animations & The Easing Plugin
Within our animated postcard we don’t necessarily want everything looping – in this example we only want the “Greetings from Build Internet!” and stamp to animate once. In order to accomplish this, we’re just going to tack the following two lines onto the end of the animation():
$("#greetings").animate({top: '125px' }, {queue:false, duration:600, easing:'easeOutBounce'});
$("#stamp").animate({left: '595px' }, {queue:false, duration:1200, easing:'easeOutBounce'});
You might have noticed the extra stuff built into animate(), don’t panic, that’s the Easing Plugin we talked about before doing it’s job. There are a number of options to play with, but for this example I’ve opted for a bounce effect when the text and stamp roll in, it adds some nice flair.
Time To Set It Off
We’ve got everything in order we need to actually have an event trigger animation(), I want it to begin as soon as the page loads, so this is what mine will look like:
$(document).ready(function() {
setTimeout("animation()",300);
});
Special Note : You may have noticed I added a setTimeout() before calling animation() – This is so the visitor/browser have time to get situated before firing off the animations. If your animations are triggered by a click or something of that nature, you won’t need to encase animation() in a setTimeout().
Your Postcard Is Ready
Consider yourself armed with knowledge, obviously there are a fair share of creative applications for looped animations, so get cooking! For those of you craving more, check out the CSS-Tricks article called Building an Animated Cartoon Robot with jQuery.
