Comment faire pour qu'une page web "s'écroule" (comme la publicité Wario Shake it sur Youtube) ?

Question

Comment ont-ils fait cette page ? http://www.youtube.com/wariolandshakeit2008

Si quelqu'un a un tutoriel sur la façon de faire quelque chose comme ça, dites-le moi !

Answer 1

On dirait que tout ça est un film Flash pour moi. Il y a une iframe intégrée à cette URL : http://1q1gafmnta4fm0riakrenq213o0sa9p9.ig.gmodules.com/ig/ifr?url=http://facebook.gspsf.com/~wii/wariolandshakeit2008/gadget_files_040209/google_gadget.xml&lang=en&hl=en_US

En fait, voici le SWF : http://facebook.gspsf.com/~wii/wariolandshakeit2008/gadget_files_040209/main.swf

Answer 2

Note : Pour une raison quelconque, j'ai pensé que les effets utilisaient les mêmes astuces que l'expérience de gravité de chrome.

Bien que cela semble avoir été réalisé en flash, quelque chose de très similaire peut être fait avec les nouvelles technologies html5.

En général, rien ne vous empêche de télécharger vous-même le code source du javascript et d'essayer de comprendre ce qui se passe. Jetez également un coup d'œil à moteurs physiques Javascript existants y Expériences sur le chrome comme celui-ci

Si vous creusez dans le code source de l'expérience de gravité, vous trouverez deux choses importantes :

1. Il utilise le moteur javascript box2d
2. Les coordonnées - et plus important encore la rotation des éléments - sont modifiées par les déclarations suivantes

-

for (i = 0; i < elements.length; i++)
{
    var element = elements[i];

    element.style['left'] = (bodies[i].m_position0.x - (properties[i][2] >> 1)) + 'px';
    element.style['top'] = (bodies[i].m_position0.y - (properties[i][3] >> 1)) + 'px';

    // webkit
    element.style['-webkit-transform'] = 'rotate(' + (bodies[i].m_rotation0 * 57.2957795) + 'deg)';

    // gecko
    element.style['MozTransform'] = 'rotate(' + (bodies[i].m_rotation0 * 57.2957795) + 'deg)';

    // opera
    element.style['OTransform'] = 'rotate(' + (bodies[i].m_rotation0 * 57.2957795) + 'deg)';
}

Answer 3

C'est cool - je ne pourrais pas vous expliquer comment faire, mais si vous faites un clic droit n'importe où dans le corps de la page, vous verrez que tout est en flash.