Cómo hacer el efecto Barell Roll de Google

Seguramente te enteraste del nuevo Easter Egg (Huevo de pascua) que apareció en Google el 3 de Noviembre del 2011. Este efecto sorprendió a muchos, con solo buscar la palabra "Do a barell roll", Google daba una vuelta completa de 360°simulando una vuelta de barril.

Google lo hace con CSS3, pero el efecto puede ser logrado con un poco de javascript y jQuery con 2 parches que nos facilitarán la vida.

¿Cómo realizar la rotación animada?

Está bastante sencillo, anexo el script.

Código :

var contando = 0; // 1
var rotacion = function(){ // 2
     if(contando <= 35) { // 3
          contando++; // 4
        $('#rotandoando').animate({rotate: '+=10deg'}, 0); // 5
     } else { // 6
          clearInterval(contando); // 7
     }
};

$(document).ready(function(){ // 8
setInterval(rotacion, 10)" // 9
});

Explicando el script

La siguiente lista hace referencia a las lineas anteriores con su respectiva cita.

1. Iniciamos un contador que nos ayudara a detener la animacion.
   
2. Creamos una variable junto con una funcion, tambien nos facilitara la vida.
   
3. Aplicamos una condicional para detener la animación a cierto punto.
   
4. Incrementamos el valor por cada vez que se ejecute la funcion si su valor sigue siendo menor a 35.
   
5. Con jQuery y los dos plugins animamos nuestro contenedor, 10 grados cada vez que se ejecute la funcion.
   
6. Si el valor ya no es menor a 35 grados, es decir, 36 (para calcular sacamos los grados aplicados y lo multiplicamos por el valor del contador: 36 * 10 grados = 360 grados), se detendrá al dar una vuelta completa.
   
7. Detenemos con la funcion clearInterval.
   
8. Al cargar el documento ejecutamos la funcion.
   
9. Ejecutamos la funcion junto con setInterval y la velocidad de ejecución de la función.
   

Los dos parches de jQuery aplicados son jquery-animate-css-rotate-scale y jquery-css-transform hechos por zachstronaut.

Lo único debes de hacer es sustituir el contenedor al que se le está aplicando la animación, o bien, envolver todo tu contenido con el contenedor.

Ir a ver demo del script.

 

Tweet