Agrega increíbles Animaciones CSS3 a tus diseños web con este increible pack de Animaciones pre hechas listas para usar.
Cuando se trata de crear prototipos, proyectos y demás es muy importante aprovechar el tiempo y no reescribir código que ya existe, código que alguien mas ya ha hecho y que tu puedes utilizar. Y sobre todo cuidando la UI y UX (Interfaz de Usuario y Experiencia de Usuario)
Por eso hoy les vengo a presentar Animate CSS un paquete de animaciones css pre hechas que podemos utilizar muy fácilmente para cada elemento que queramos animar. Animate CSS incluye decenas de animaciones css para que tengas la posibilidad de elegir entre las que quieres utilizar. Ademas de que tenemos la posibilidad de modificar las animaciones css a nuestro gusto, agregar mas o hacer lo que queramos.
Te invito a que accedas a su pagina principal en donde puedes ver todas las animaciones, su nombre (que mas adelante sera importante) y puedes reproducir cada una de las animaciones para visualizarla.
Animate CSS: http://daneden.github.io/animate.css/
¿Como funciona Animate CSS?
Es muy sencillo Animate CSS consta de un archivo .CSS que podemos descargar, archivo que contiene todas las animaciones que has visto, lo único que tenemos que hacer es decidir que animación queremos utilizar, copiar el nombre y agregar una clase CSS al elemento al que queramos aplicarle la animación. Es asi de sencillo.
Como es un archivo CSS podemos modificarlo a nuestro gusto podemos desde cambiar la duración de las animaciones, los efectos, lo que sea que nosotros necesitemos, o incluso puedes agregar tus propias animaciones, porque no ?
El mayor provecho que le podemos sacar a este paquete de librerias es combinarlo con Javascript o Jquery, ya que ahora mismo si agregas una clase a tu elemento este va a tener la animación unicamente cuando se abra el documento.html. Con Javascript y Jquery puedes hacer que la animación se ejecute cada que presionas un boton, cada que pasas el cursor cerca, etc. Las posibilidades son ilimitadas.
Apliquemos nuestras Animaciones CSS con un pequeño tutorial
Seguramente ya hayas entendido como funciona en teoría, pero vamos a ver un pequeño tutorial para que puedas comprobar lo sencillo que es utilizarlo, vamos a usar un poco de Javascript para poder hacer que nuestra animación se reproduzca cada de hagamos clic en un botón.
Paso #1: Descargar Animate.css
Para descargar Animate CSS puedes hacerlo desde su pagina principal: http://daneden.github.io/animate.css/
También puedes hacerlo directamente desde este enlace: https://raw.github.com/daneden/animate.css/master/animate.css
O incluso puedes hacerlo desde Github: http://github.com/daneden/animate.css
Lo único que tienes que hacer es copiar todo el código css que tienes en pantalla y pegarlo en un nuevo archivo, este archivo lo guardas bajo el nombre que quieras, pero recuerda que tiene que tener la extensión .CSS, en mi caso lo nombrare animate.css
Paso #2: Integrar nuestro archivo en nuestro proyecto
Lo siguiente es integrar las animaciones con nuestro proyecto, para eso es tan sencillo como poner el archivo creado animate.css dentro de la carpeta de nuestro sitio web, proyecto, etc. Y enlazar el archivo desde nuestro sitio web.
Tan sencillo como poner la etiqueta <link> dentro de nuestro <head>
<link rel="stylesheet" href="animate.css">
Paso #3: Probar nuestras animaciones
Una vez ya importadas nuestras animaciones vamos a probarlas, para eso yo tengo un elemento div en mi documento, lo unico que tenemos que hacer es a ese elemento div ponerle una clase llamada animated [nombre de la Animacion]. En mi caso yo utilizare la primera animación llamada bounce, por lo que nuestra clase quedaría: class="animated bounce"
<div id="elemento" class="animated bounce"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div>
Como quizás hayas notado, yo he puesto un id a nuestro div, esto porque en el siguiente paso con javascript vamos a hacer que la animación se reproduzca cada que demos un clic en un botón.
Entonces, si ahora mismo ves tu sitio en el navegador veras como la animación se reproduce, pero solo 1 vez, ahora vamos a hacer que la animación se ejecute cada que presionemos un botón.
Paso #4: Ejecutando la animación con un botón
Nosotros vamos a reproducir la animación con un botón, pero puedes hacerlo diferente, tienes que saber javascript o jquery, pero si lo sabes, entonces también sabes de todas las posibilidades que tienes para jugar con estas animaciones.
Lo que vamos a hacer es irnos al final de nuestro documento, antes de </body> y escribir el siguiente script:
<script>
var contador = 1;
function cambiarClase(){
if (contador == 1) {
document.getElementById('elemento').className = 'animated bounceInUp';
contador = 2;
} else {
document.getElementById('elemento').className = '';
contador = 1;
}
}
document.getElementById('accion').onclick = cambiarClase;
</script>
El script que te he puesto es muy sencillo, incluso se podría mejorar bastante, simplemente lo he creado para este tutorial, pero te recomiendo que profundices un poco mas en Javascript y hagas uno que se adecue mejor a tu proyecto.
El script anterior lo único que hace es ejecutar una función cuando presionamos un botón que he agregado y que tiene una ID llamada accion, esta funcion que ejecutamos en pocas palabras lo que hace es agregarle la clase a nuestro elemento y si volvemos a dar otro clic se la quitamos. Si damos un tercer clic la agregamos, y asi sucesivamente. No me voy a detener mucho a explicar el código, simplemente lo hago para que tengas una idea de como quedaría.
Si quieres ver el código completo, voy a agregar un Pen con el resultado tal y como yo lo tengo, para que lo puedas analizar, y jugar con el.
See the Pen yGqxm by Carlos Arturo Esparza (@falconmasters) on CodePen.5968
¡Novedoso! Excelente aporte Carlos Arturo. (Y) Esto me lo llevo!
Genial, muchas gracias me alegra que te haya gustado y servido el articulo.
Como podria hacer una animacion aun Div sin mandarlo llamar con un CLIC
Carlos Arturo… Tendras en youtube esta clase ?
No, es probable que no, porque ?
Buenas como hago que los texto que hago con animated.css aparezcan por encima de un slideshow osea como hago para decidir cual elemento ira encima del otro.
Eso lo logras muy fácil con esta propiedad CSS:
https://www.falconmasters.com/css/propiedad-z-index/
Gracias Carlos me Sirvio cada vez aprendo mas ahora ya tengo montado el texto arriba de slidechow y le monte un efecto de animated.css pero el efecto solo reproduce una vez cuando vuelve a dar l vueltas de la imagens los texto estan estatico ¿como hago que los texto sigan haciendo los efectos miestras van pasando las imagenes ?
Como haría para que a medida que voy bajando el scroll aparezcan los efectos?
dejame decirte alf que el cssanimate ya viene incluido con lo que tu dices :3 por eso es muy practico
@Carlos Arturo:disqus Disculpa, no se mucho aun de javascript
Como seria para que siempre que de click aparesca el efecto, y no haga pausas por tener que cambiar la clase
Gracias y Saludos
@falconmasters:disqus
Disculpa, no se mucho aun de javascript
Como seria para que siempre que de click aparesca el efecto, y no haga pausas por tener que cambiar la clase
Gracias y Saludos
Muy buen aporte! Una pregunta: Yo los quiero poner para un menu, cosa que cuando pase el mouse se muestre el efecto. Le agregue un hover en el Css y la clase «animated bounce» se la agregue en la etiqueta «a» dentro de un «li». No obtengo nada. Como se puede hacer? Gracias
Sinceramente por Falcon Maste aprendí a utilizar Bootstrap y tenía muchas dudas pero segui casi todos los tutos y ahora estoy considerando crear mi propia empresa con otro amigo que se inicio en bootstrap.. Gracias y mil gracias por tanto talento que ha regalado a miles de personas y saludos desde Costa Rica..
explicame como puedo descargar instalar o empezar a usar jquey o cual se descarga o si se ejecuta lo de una descarga o como es please ayuyda help me!!1
hola que tal tengo una pregunta sobre el tab ya que no me funciona cuando uso el html:5 en sublime txt3 tengo una notebook, si algien sabe como echarlo a andar se lo agradesco gracias.