Creando animaciones con jquery y con Animelt

DESCARGA : jQuery Animelt

Animelt es un plugin para crear animaciones con jquery , si lo que buscas es darle un toque más personal y presentable a tus efectos este proyecto te ayudara a crear efectos como:

– Movimiento de traslación con una pequeña transformación.

En el  sitio se pueden encontrar demostraciones y podemos observar que al darle clic a un elemento  que se encuentra en un etiqueta div este reacciona de tal forma que se mueve de un lugar a otro con el simple hecho de usar una pequeña serie de instrucciones

Demo:http://grsabreu.github.io/Animelt-Plugin/

$("div").animelt({
 transform: "rotateY(360deg)",
 left: "400px",
 width: "40px",
 border: "2px solid #000"
}, 1000, function(){
 console.log("It's finished!");
});

También podemos observar el en sitio, el manejo de sombras en los elementos, así como también rotaciones con animación que sin duda creo agradaran a la vista de quien lo observa, las rotaciones y sombras son muy simples de aplicar y no requieren mucho conocimiento.

$("div").animelt({
    boxShadow: "10px 0px 20px #000"
}, 800, "easeOutElastic");

$(".foo").animelt({
    transform: "rotate(180deg)"
    width: "100px"
},  800, "easeOutElastic");

En el ejemplo para descargar se puede encontrar el mismo efecto de rotación que se encuentra en el sitio de ejemplo, sin embargo este trabaja con un clic en la palabra Teste (se encuentra del lado superior derecho del eejemplo), al darle clic nos encontramos con cuatro cuadrados que giran en su mismo eje, este efecto se logra con estilos y es una propiedad de transformación, misma que el plugin ya se encarga de crear.

[hmtl]

-webkit-transform: rotate(288deg);

[/html]

You may also like...