Running a very simple, looping animation on a site?

Question

I want to make an animation that runs as soon as someone enters my site and everything loads (can jQuery do it?) Mostly everything will be static except for little black silhouettes of leaves.

Think of a very simplified version of Blizzard's site animation: http://us.blizzard.com/en-us/

Just simple silhouette following a simple path, nearly straight with minor variation. It will go in front of a big white object.

Thank you.

Answer 1

This is definitely do-able, though a little tricky. I'm doing the same thing on a site I'm making, except with snow. There are 2 layers of png files and I used the backgroundPosition plugin to make animate be able to change background position - http://cornerstonegreentraining.com/comfortize.com/index.php if you want to see the draft. The speed variable is only because I like working in seconds instead of miliseconds. I used the following code:

$(function(){
 bgSnow(100000, 1);
 function bgSnow(animateTime, ratio){
        var speed = 1000;
        $('#snow2').animate({
              backgroundPosition:"(" + speed*15*ratio + "px "+ speed*15 +"px)"
        }, animateTime, 'linear');
        $('#snow1').animate({
               backgroundPosition:"(" + speed*6*ratio + "px "+ speed*4 +"px)"
        }, animateTime, 'linear', function(){
        clearSnow(animateTime, ratio);              
        });
 }
 function clearSnow(animateTime, ratio){
        $('#snow1, #snow2').css('backgroundPosition',"0px 0px");
        bgSnow(animateTime, ratio);
 }
});

You can add a couple more animations at different time lengths for some variation. This solution works with IE7 - you'll have to find a go-around if you use a css3 or canvas solution.

Answer 2

There's a number of ways in which this can be done.

1. If your animating anything in the animation queue such as positions, colors, background colors, margins, font sizes etc. you can use the animate() function of JQuery. So you could animate the position, width and height of the HTML elements that you have, for which you want to create the silhouette. You can read more about the animate object here - http://api.jquery.com/animate/

2. Using CSS3 transformations, you can run many scaling and transformation operations on your HTML elements. Here's a good place to start to find out more - http://css3.bradshawenterprises.com/. Here's another plugin which helps in CSS3 animations - http://ricostacruz.com/jquery.transit/

3. You can also run animations using the canvas element - http://www.html5canvastutorials.com/. The canvas element can be used for simple and complex animations. For more complex 3D animations here's a great gallery - http://mrdoob.github.com/three.js/

4. If you need vector graphics and animations on those vectors, you could use SVG's as well. Keith Wood has made a Jquery plugin for the same - http://keith-wood.name/svg.html

There are also plenty of other plugins and JavaScript / JQuery libraries which can help create animations.

If you want to layer the animation above a image or background, you'll need to setup your HTML as below:

<div class='container'>
    <div class='gallery'>
        <div id='item1'></div>
        <div id='item2'></div>
        <div id='item3'></div>
    </div>
</div>

So you can set a background on the 'container' class and run a JQuery gallery on the 'gallery' class to slide between the various '#item' children that you have. For eg. you could use the JQuery Cycle plugin - http://jquery.malsup.com/cycle/ - on 'gallery' and within each #item element, place your animated elements. Remember that the z-index of the animated elements needs to be higher than that of the parent container.

Blizzard uses a Flash module for their animations. You could load your entire animation through JQuery using either:

1. $(window).load() - Runs when all the content has been loaded and is a standard feature of Javascript.

2. $(document).ready() - Runs when the HTML document has been loaded and is specific to JQuery.

There's a number of ways to do what you want to achieve, and depending on your requirements, one method may work or not. It's important to keep in mind the z-index aspect though as the animated elements need to appear above the lower layers.

Hope this helps.