Recreate Simple Flash Animation using Javascript

Question

I came a across a really sharp intro effect I'd like to try and create in jQuery, mootools or prototype: http://www.johndigweed.com/ (Just the spin in effect) So in a sense, I want to spin in the main content div of the page.

Any suggestions to get started or are there base plug-ins that have help achieve this intro effect outside of flash? Or is this effect even feasible to to do with JavaScript?

I am a noob with JavaScript so many Thanks!

Answer 1

As a general rule, assume something is possible until you've given yourself a concussion with the desk.

Anyway, it is possible to do javascript based animation, the simple stuff has already been implemented in jQuery and the like (slides and fades etc).

My initial research has led to believe that this kind of animation currently only possible with webkit browsers (and IE, using a very different method and linear algebra). There is a webkit style called -webkit-transform that has a value 'rotate()'

You can set the rotation (using jQuery here because its what I know) like this:

jQuery("#div").css('-webkit-transform', 'rotate(20deg)')

The deg bit is important otherwise it doesn't work (you can also use radians by using rad instead of deg)

Remember that this will only work in webkit browsers, meaning safari and chrome. Mozilla might have a similar method you can use.

Answer 2

For that effect you can use the following jQuery plugin.

http://code.google.com/p/jquery-rotate/

After you include jQuery and this plugin you can simply do something like:

function rotation() {
    //being #theimage the element id that you want to rotate
    $('#theimage').rotateRight(45);
}

$("document").ready(function(){
    setInterval("rotation()",1000);
});

This code is very simple to understand. After the document is ready (DOM is ready), you are simply going to call the function rotation() every 1 second. And each time rotation is executed you rotate your image 45 degrees.

This is even easier to do this HTML5 canvas. If you want I can post the code to do that.

Answer 3

It won't work on every site and any browser yet, but it's a start:

var i = -90,
    ii = -900,
    timer,
    body = jQuery("body");

function rotation() {
    body.css({
        '-moz-transform': 'rotate('+(i++)+'deg)',
        top: (ii+=10) + "px"
    });
    if(i>0){
        clearInterval(timer);
    }
}

body.css({
    '-moz-transform': 'rotate('+i+'deg)',
    top: ii+"px",
    position: "absolute"
});

timer = setInterval(function(){rotation();}, 100);