Files

Share

Topics

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.

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’.

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.

1

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.

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.

1

2

3

4

5

6

functionanimation(){

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():

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:

1

2

3

$(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.

Hi, I loved this tutorial and easily built a banner like this one here. But when I published to the web I experienced a conflict with the jquery cycle plugin, which is also called by using jQuery(document).ready(function($) { $(“#rotator”).cycle({fx: ‘fade’, timeout: 6000, }); });
When I remove those lines the banner animation goes ok. Any ideas on how to solve this?

Awesome tutorial, now all we have to do is set the background color to change based on the time of day, and make the tube bob up and down in response to the user’s mouse movements, and we’re really cooking!

it has 3 movements, first leftTop, then leftTop again and the final leftTop. It’s animating a rising moon across the screen, from bottom right to topleft, and it’s beautiful. But i want the three animation smoothing together, not the three little pause.

Wonderful beat ! I would like to apprentice while you amend your web site, how could i crssbuibe for a blog web site? The account aided me a acceptable deal. I had been a little bit acquainted of this your broadcast provided bright clear idea Many thanks,

I just needed to say that I found your website via Goolge and I am glad I did. Keep up the good work and I will make sure to bookmark you for when I have more free time away from the books. Thanks again!

For some reason I felt relieved about my decision on getting a new Piano Bench For Sale just after looking through your post. Carry on and shed light on other individuals by spreading your ideas I’ll be one of the people that will constantly there to help cheer you up.

Great tutorial! I am going to use it for my personal site but am having trouble resetting animated diagonal objects, they just continue downwards and upwards. New to JQuery so sorry for the simpleton apprioach. Thanks!

I got a big question about the example you wrote above.
why there is NOT a “semicolon” or “dot” at the end of the line 2 ?
how it is working without them ? can you give another syntax like that ?
in javascript a newline also no needs semicolon or point (to chain commands)?
when I put semicolon or point animation doesnt working as expected.

would you mind telling us or give a link or another example code about this issue ?
thank you much!

Hiya, I’m truly joyful I’ve originate this info. At the moment bloggers publish only in relation to gossips and clear and this is actually frustrating. A good place with exciting satisfy, this is what I penury. Thanks for keeping this website, I will ensue visiting it. Accomplish you solve newsletters? Cant attain it.

This a very clever idea and also a great effect. It caught my attention anyway! It would be good to see how this looks with some different themes: Like a space ship bobbing up and down in space with some planets going by etc. I will certainly be using this idea in some future projects I think. Nice article, thanks for sharing. :)