Running a very simple, looping animation on a website?

Question

I want to make an animation that starts as soon as someone logs into my site and everything loads (can jQuery do this?) Basically everything will be static except for the small black silhouettes of the leaves.

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

Just a simple silhouette, following a simple path, almost straight with a slight change. He will face a large white object.

Thank.

Answer 1

, . , , . 2 png , backgroundPosition, - http://cornerstonegreentraining.com/comfortize.com/index.php, . - , miliseconds. :

$(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);
 }
});

. IE7 - , css3 canvas.

Answer 2

, .

• , , , , , .., animate() JQuery. , , HTML-, , . - http://api.jquery.com/animate/

• CSS3, HTML-. , - http://css3.bradshawenterprises.com/. , CSS3 - http://ricostacruz.com/jquery.transit/

• canvas - http://www.html5canvastutorials.com/. canvas . 3D- - http://mrdoob.github.com/three.js/

• , SVG. JQuery - http://keith-wood.name/svg.html

JavaScript/JQuery, .

, HTML- :

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

, "" JQuery "", "#item", . . JQuery Cycle - http://jquery.malsup.com/cycle/ - #item . , z- , .

Blizzard Flash- . JQuery, :

• $(window).load() - , Javascript.

• $(document).ready() - HTML JQuery.

, , . z-index, , .

, .