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.
1 comentarios, 0 referencias
+
#