Crafting an Animated Postcard With jQuery

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

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:

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

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.

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.

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.

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:

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.

Posted Monday, August 10th, 2009 · Back to Top

SPONSOR

Add Comment

94 Comments 125 Mentions

  1. Brian Klepper Author Editor

    Excellent work! I am currently working on a small project using similar functions. Thanks for the post
    .-= Brian Klepper´s last blog ..Steal Everything Excerpt =-.

    ·

  2. Robert Fisher Author Editor

    Great tutorial! I can imagine how this code can be used for other projects.
    .-= Robert Fisher´s last blog ..Math Resources Online =-.

    ·

  3. Hezi Author Editor

    rocknroll!
    .-= Hezi´s last blog ..HeziAbrass: Probably the most impressive animated gif ever http://bit.ly/PEUTs =-.

    ·

  4. mrvn Author Editor

    cool stuff. very useful for many other things too!!
    .-= mrvn´s last blog ..Artcore die Zweite =-.

    ·

  5. anil singh Author Editor

    Useful and intersting info

    ·

  6. Raja Sekharan Author Editor

    Great tutorial Sam. There is a similar implementation using mootools here:

    http://devthought.com/

    The clouds disappear when you click on them and can be dragged around. Really nice effect.
    .-= Raja Sekharan´s last blog ..How To Create Custom Forms Using Drupal In 4 Easy Steps =-.

    ·

  7. choen Author Editor

    ow. i liked. thanks… I want to try this tutorial
    .-= choen´s last blog ..Menggunakan sIFR 2.0 di ‘Blogger Template’ =-.

    ·

  8. tiff Author Editor

    Great tutorial!
    But where can I found (background-)images like this?

    ·

  9. webmasterdubai Author Editor

    wowo great work nice tutorial anybody can think its flash but is jquery.

    ·

  10. Jason Author Editor

    Awesome tutorial! I love how jQuery can be used in place of flash in many cases.
    .-= Jason´s last blog ..Creating Blind Accessible Web Sites and Applications =-.

    ·

  11. Sam Dunn Author Editor

    Thanks for the great feedback everyone.

    @tiff
    I created all of these background images specifically for this tutorial

    ·

  12. Scott Author Editor

    Would love to see how to do this on a div that is fluid and goes across the whole screen.

    ·

  13. Anthony Calzadilla Author Editor

    Excellent article Sam! You’ve inspired me to re-visit my jQuery robot and try to up the ante of jQuery animation.

    Thanks!
    Anthony
    .-= Anthony Calzadilla´s last blog ..Let’s Word Out Key Terms Like XHTML, jQuery and CSS =-.

    ·

  14. Luciano Santa Brígida Author Editor

    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?

    ·

  15. Luciano Santa Brígida Author Editor

    I figured a partial solution: I replaced $(document).ready(function() {} ) for $(window).load(function() {} )

    But unfortunately, it didn’t work on Chrome. IE and FF are OK, only tested in these 3 so far.

    Question: if I used setInterval instead of setTimeout, would I achieve the same loop effect? Could this fix the Chrome problem?
    .-= Luciano Santa Brígida´s last blog ..Dicionário Twitter =-.

    ·

  16. Amy Author Editor

    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!

    ·

  17. bayXSonic Author Editor

    ooo ugly setTimeout!
    Im working on a project now and I came up with this:
    function pulse(selector){
    $(selector).animate({opacity:.7}, 500).animate({opacity:.9}, 500, function(){pulse(selector)});
    }

    But I’m sure that it can be improved much more.

    ·

  18. Vishal Modha Author Editor

    I’ve taken this a few steps further by adding an interactive Santa to the mix with the use of the sound plugin….

    Check it out here and tell me what you think:
    http://modasoft.co.uk/ecard.html

    Thanks for this article, it’s been a great stepping stone.

    ·

  19. Mike Croteau Author Editor

    Very cool… plan on playing around with this!

    ·

  20. Marc Author Editor

    Thanks! A good big start for my project.

    Also I found a way that does not have the bug (in my case) of not appearing if opacity is set lower than .7.
    We can manipulate in time opacity parameter!

    I use:

    duration=2000;
    opacity=.2;
    $(‘xyz’).fadeTo(duration,opacity);

    ·

  21. viqizevic Author Editor

    Nice tutorial!!
    Awesome! Super!
    ^_^

    ·

  22. saduran Author Editor

    hi firstly tnx for this great Tutorial , i have one question how can i change clouds speeds ?

    ·

  23. saduran Author Editor

    ok i have solved problems :) tnx again

    ·

  24. SexyContent Author Editor

    So creative!
    Simple but effective. Thanks!

    ·

  25. tokat nakliyat Author Editor

    good code thanks

    ·

  26. Phil_M Author Editor

    Really Great Tutorial!!
    Thanx!!

    ·

  27. Xtence Author Editor

    Nice ! who needs flash anyway !

    Great tutorial

    ·

    • Charl Author Editor

      Wow, that’s a really clever way of tnihking about it!

      ·

  28. oyun haberleri Author Editor

    great… thanks for sharing.

    ·

  29. guille Author Editor

    Great Efect! I Love JQuery!

    ·

  30. Nano Author Editor

    thanks… :)

    ·

  31. Valikonen Author Editor

    Very cool effect, thanks!!! If you want to see gallery and menus, visit http://www.1artmedia.com, you have online demo and free download, bye!

    ·

  32. Greta Author Editor

    Really Nice…..

    ·

  33. Creación Web Author Editor

    Si es cierto es buen programa el jquery para dar vida a una web, lo hace ver bonito buen post.

    Saludos…

    ·

  34. bazafrogg Author Editor

    merci beaucoup,
    this tut is very useful

    ·

  35. ดูซีรี่ย์ Author Editor

    Very cool effect

    ·

  36. Dantel Author Editor

    Do you have a live demo? also could not see? Thanks.

    ·

  37. ann Author Editor

    good work!

    ·

  38. web design uae Author Editor

    Thanks for the awesome tutorial.

    ·

  39. Jon Author Editor

    How can I see this in action? I can’t seem to see it in Chrome or FF4.

    ·

  40. Dortcelik Cocuk Hastanesi Randevu Alma Author Editor

    Thanks for sharing and keep up the good work. That is a great article.

    ·

  41. Catzie Author Editor

    This is very interesting. It makes me prefer jQuery over Flash even more.

    ·

  42. cabal Author Editor

    Knocked my socks off with !

    ·

  43. Igor Author Editor

    Sample ? :)

    ·

  44. طراحی وب سایت Author Editor

    Thanks for posts

    ·

  45. Ye Ko Author Editor

    Great !!!!

    ·

  46. Tidy Design Author Editor

    One word… AWESOME!

    ·

  47. genn Author Editor

    You are brilliant! I’ll be needing this for my portfolio site.. Thank you heaps! :) Continue to shine on!

    ·

  48. Raja Author Editor

    Superb!!!!111

    ·

  49. Frank Author Editor

    Where is the demo? It seems to be a dodgy site making people click on that advert on top…

    ·

  50. طراحی سایت Author Editor

    Nice tutorial!!
    Thanks

    ·

  51. test Author Editor

    test

    ·

  52. rift platinum Author Editor

    Look like cool plugins, lots of functionalities in a single plugins. news letter plugin is a sparky one among theme. Hope i will get a chance to grab them for free

    ·

  53. moedas pw Author Editor

    Hi everyone, thank you for your support. The contest is closed.

    The winners are listed at the end of this article. Thank you!

    ·

  54. Builders in chennai Author Editor

    Great ! I am just working on a similar one like this and searched all over the net and found yours.Thanks for the share.

    ·

  55. kirth Author Editor

    Hello, your tutorial is awesome and i managed my animation so far ok. I have only a small problem, i don’t want the little pause from first animation to the second and to the final third.

    My code is:

    $(“.ie .moon”).animate({left:”+=230px”,top:”+=-180px”},15000).animate({left:”+=330px”,top:”+=-30px”},15000).animate({left:”+=270px”,top:”+=-45px”},15000)

    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.

    ·

  56. طراحی سایت و سئو Author Editor

    very great man tnx

    ·

  57. Carina Author Editor

    I haven’t got any experience with JQuery. What are the advantages? What makes it better than Flash?

    ·

  58. Social media Author Editor

    Wow its really awesome jQuery tutorial. Nicely explained all code. And play very smoothly. Thanks for sharing.

    ·

  59. Maryjo Bergey Author Editor

    Really nice pattern and excellent content , nothing at all else we want : D.

    ·

  60. website designing in chennai Author Editor

    Good Work. This is really excellent

    ·

  61. قیمت آهن آلات Author Editor

    you are great and thank for your articles.

    ·

  62. gavin Author Editor

    Thanks for sharing . Will try to use some the effects in my next website .
    http://www.gavinmendes.co.in

    ·

  63. طراحی سایت Author Editor

    This is very interesting. It makes me prefer jQuery over Flash even more.

    ·

  64. Boyd Author Editor

    Quite a difficult for me to understand, but i stll like it.

    ·

  65. يوتيوب Author Editor

    You are great and thank for you articles

    ·

  66. شات صوتي Author Editor

    thank for you articles

    ·

  67. Juan Caonth Author Editor

    Hello !

    ·

    • Ana Author Editor

      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,

      ·

  68. Pitso Author Editor

    Very helpful…. thanks!

    ·

  69. Biuro Podrozy Author Editor

    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!

    ·

  70. Piano Bench Author Editor

    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.

    ·

  71. Ben Author Editor

    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!

    ·

  72. obuwie damskie Author Editor

    I this way web blog greatly, Its a really nice billet to read and get info. If in the beginning you don’t succeed, you’re operating about typical. by M. H. Alderson.

    ·

  73. Shingo Author Editor

    Nice! You might already know this but you can set the function to be called by setTimeout like this as well:

    setTimeout(sun_raft, 2000);

    Cheers

    ·

  74. Luthfi All Author Editor

    wow.., it’s so great..
    I have try..
    thanks so mch

    ·

  75. blue Author Editor

    Great tut!!

    Does anyone here have a clue how to delay the whole thing until all image have loaded?

    ·

  76. hcetiner Author Editor

    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!

    function animate_element(){
    $(“#element”).animate({left:”+=100px”},1000).animate({left:”-=100px”}, 1000) //????
    setTimeout(“element()”,2000);
    }

    ·

  77. Cricket Cartoons Author Editor

    Superb man. This was of a great help. Too good. Thanks

    ·

  78. Web Design Author Editor

    Very handy as I am just planning out a project using HTML5, jQuery and lots of animation. Thanks for the info!

    ·

  79. ترجمه انگلیسی Author Editor

    nice

    i am iran

    ·

  80. خدمات عروسی Author Editor

    very good ******

    ·

  81. sahar Author Editor

    very good
    very helpful
    thanks!

    ·

  82. عروس سایت Author Editor

    You are great and thank for you articles

    ·

  83. Rory Radmacher Author Editor

    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.

    ·

  84. Portsmouth Website Design Author Editor

    Great stuff, definitely going to use this for our local projects. A big thanks :)

    ·

  85. Archie Author Editor

    This is so tidy!

    I used the effects here: http://archibaldbutler.com/projects/edwinsfordestate2/index.html

    Thanks for sharing,
    Archie

    ·

  86. Start up a Business Author Editor

    There is such great features online nowadays, and this is great. Archie; you’re website looks amazing.

    ·

  87. Chichester Website Desigb Author Editor

    Very useful stuff here, we are newbies but definitely plan to use this online. Thanks

    ·

  88. West Midlands SEO Author Editor

    Great post.

    ·

  89. Web Design Portsmouth Author Editor

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

    ·

  90. bird group Author Editor

    Very useful information and clever to read, thanks guys

    ·

  91. خرید وی پی ان Author Editor

    tnxxxx , very useful for me

    ·

  92. Internet Marketing Portsmouth Author Editor

    Great to see a informative post, helps us all. Thanks a million

    ·

 

Build Internet by One Mighty Roar. Since 2008.