Agregar animaciones a mis páginas Web

Crear páginas Web cada vez es más rápido y sencillo, ya que se ponen a nuestra disposición nuevas y mejores Tecnologías que hacen gran parte del trabajo pesado y concurrente por nosotros. En esta ocasión, vamos a ver cómo crear páginas Web más bonitas y llamativas para los usuarios, para esto vamos a usar 2 Tecnologías llamadas animate.css y wow.js.

Descargar e instalar

Para usar estas tecnologías hay que ir a la página oficial a descargarlas:

• Para descargar anímate.css ingresa a este link: https://daneden.github.io/animate.css/
• Para descargar wow.js ingresa a este otro link: https://wowjs.uk/docs.html

Con la primera línea referenciamos animate.css, con la segunda wow.js y con la tercera inicializamos wow.js.

      <link rel="stylesheet" href="css/animate.css">
      <script src="js/wow.min.js"></script>
      <script>new WOW().init();</script>
    

Empezar a animar

Para comenzar animar solo va a ser necesario agregar la clase wow y posteriormente una clase de animate.css, puedes buscar la que más te guste en la página oficial que proporcioné arriba.

Por ejemplo, si quieres animar un título (etiqueta h1) vas a hacer lo siguiente:

      <h1 class="wow slideInLeft">Mi titulo</h1>
    

Wow.js nos permite agregar ciertos parámetros para retrasar o definir la duración de la animación, entre otras funciones:

• data-wow-duration: Cambiar la duración de la animación.
• data-wow-delay: Retraso antes de que comience la animación.
• data-wow-offset: Distancia para iniciar la animación (relacionada con la parte inferior del navegador).
• data-wow-iteration: Número de veces que se repite la animación.

Un ejemplo para las funciones anteriores es el siguiente:

      <h1 class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></h1>
    

Conclusión

Wow.js y animate.css nos proveen clases que podemos usar en cualquiera de nuestras etiquetas HTML por medio de clases, de esta forma podemos dar animaciones y nuevos eventos de funcionalidad a nuestras páginas Web, puedes ir probando diferentes animaciones de entrada, salida, zoom y más, descritas en la documentación de animate.css.