How to: Illustrator graphic to web animation [closed]

Question

I have been provided an Illustrator graphic, all in individual shapes, (below low res screenshot) which I need to use on a website.

I need to animate sections of the graphic such as the birds flying, people and cars moving and lights going on/off.

The question is, how should I do this? I've been looking into SVG, CSS and JQuery animation. So far being able to use CSS and JQuery quite effectively.

It would be great if I could somehow make the animation work when someone re-sizes their browser window (responsive layout), that's why I started looking at SVG. I also need the animation to be widely compatible between different browsers.

Any examples? What would you recommend?

Thanks.

EDIT:

I am going to go with JQuery and keyframe animations. The Jquery animate function I am using is:

    function animatethis(targetElement, speed, options, options2) {
        $(targetElement).animate(options,
        {
            duration: speed,
            complete: function ()
            {
                targetElement.animate(options2,
                {
                    duration: speed,
                    complete: function ()
                    {
                        animatethis(targetElement, speed, options, options2);
                    }
                });
            }
        });
    };

Usage example:

animatethis($('.big-cloud1'), 40000, {'left': '+=120%'}, {'left': '-=120%'})

I am also calculating what size the individual images have to be when re-sizing the browser. I have based this on the max ratio of the animation at full width.

Here is the code for this:

// get main image
var mainImage = $('.main-bg');

// Create new offscreen image to test
var theImage = new Image();
theImage.src = mainImage.attr("src");

// Get accurate measurements from that.
var maxWidth = theImage.width;

jQuery.fn.resizeRatio = function(newHeight){
    // work out new ratio
    var currentWidth = $('.main-bg').width();
    var diff = maxWidth - currentWidth;
    var precent = diff / maxWidth;

    // get current image width
    var currentImage = new Image();
    currentImage.src = $(this).attr("src");
    var currentWidth = currentImage.width;

    // apply new width
    $(this).width(currentWidth - (currentWidth*precent))

}

var initAnimation = function(){
    $('#animation').imagesLoaded(function(){
        $('#animation img').not('.sun, .main-bg').each(function( index ) {
            $(this).resizeRatio()
        });     
    });
}
initAnimation()

$(window).resize(function(){
    initAnimation()
});

Answer 1

I don't have experience with SVG.

However, I would probably make something like this using CSS and jQuery. Sizing the images in CSS using percentages, you will probably be able to get this working on all different kind of screens. However, a lot of work goes into making that all work together well.

All jQuery also need to be done in percentages, or you need to make things happen on resize.

jQuery(window).resize(function(){
    // Do your magic
});

Since you'd mostly have to work with the width of the image, rather than the height, I would probably work with the following CSS:

img {
    width: (certain amount in percentages)
    height: auto;
}

This will ensure the images stay in the right ratio. (but I'm guessing you already knew that, considering you are planning to develop such a project).

In case you need me to elaborate my idea a bit more, I would be happy to do so. Apart from this however, I see no better/faster way of doing this (unless you think Flash is a good way).

Answer 2

you can use svg with resize and animations like this
HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600" preserveAspectRatio="xMidYMid"  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
<g id="targets">
    <g id="red">
        <rect id="rect_red" x="110" y="115" width="64" height="64" rx="8" ry="8" fill="#FF173D" stroke="#000000" transform="translate(-108, -114)" />
        <animateMotion id="animation_red" begin="0" end="indefinite" dur="10s" repeatCount="indefinite" path="M 0 0 H 500 Z"></animateMotion>
    </g>
    <g id="blue">
        <rect id="rect_blue" x="110" y="115" width="64" height="64" rx="8" ry="8" fill="#0000aa" stroke="#000000" />
        <animateMotion id="animation_blue" begin="indefinite" end="indefinite" dur="10s" repeatCount="indefinite" path="M 0 0 H 500 Z"></animateMotion>
    </g>
    <g id="gree">
        <rect id="rect_green" x="10" y="300" width="64" height="64" rx="8" ry="8" fill="#00aa00" stroke="#000000" />
        <animateMotion id="animation_green" begin="indefinite" end="indefinite" dur="5s" repeatCount="indefinite" path="M 0 0 H 300 Z"></animateMotion>
    </g>
</g>
</svg>    

you can start the animation with the attribute begin like the "rect_red"
or you can use javascript to start the animation like this

//jQuery    
$(document).ready(function () {
$("#rect_blue").click(function(){
     $("#animation_blue").get(0).beginElement();
});
$(window).resize(function(){
     $("#animation_green").get(0).beginElement();
});
});    
//or javascript    
document.getElementById('rect_blue').addEventListener("click", function(){
    document.getElementById('animation_blue').beginElement();
}, false);
window.addEventListener("resize", function(){
    document.getElementById('animation_green').beginElement();
}, false);    

you can use css to style the svg elements like this

#rect_blue:hover{
    fill:#0000ff;
    cursor:pointer;
}
#rect_red:hover{
    fill:#aa0000;
    cursor:pointer;
}    

http://jsfiddle.net/Kv8Ju/1/