aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Emile es una de esas maravillas que con tan solo 55 líneas nos permite disponer de efectos CSS con Javascript en nuestras aplicaciones.

<!-- Cargamos la librería -->
script src="emile.js"></script>

<!-- Definimos los elementos -->
<div id="test1" style="position:absolute;left:0px;background:#f00;opacity:0">test</div>
<div id="test2" style="border:0px solid #00ff00;position:absolute;left:0px;top:400px;background:#0f0">test</div>

<!-- definimos los efectos -->
<script>
// Aplicamos el efecto al elemento #test2
  emile('test2', 'left:300px;padding:10px;border:50px solid #ff0000', {
    duration: 500,
    after: function(){
      // Aplicamos el efecto al elemento #test1
      emile('test1', 'background:#0f0;left:100px;padding-bottom:100px;opacity:1', {
        duration: 4000, easing: bounce
      });
    }
  });
  // Función que cambia la posición del elemento
  function bounce(pos) {
    if (pos < (1/2.75)) {
        return (7.5625*pos*pos);
    } else if (pos < (2/2.75)) {
        return (7.5625*(pos-=(1.5/2.75))*pos + .75);
    } else if (pos < (2.5/2.75)) {
        return (7.5625*(pos-=(2.25/2.75))*pos + .9375);
    } else {
        return (7.5625*(pos-=(2.625/2.75))*pos + .984375);
    }
  }
</script>

El proyecto lo podeis descargar desde github.com y ver el ejemplo de uso que nos incluye.