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:

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.

© 2019 Todos los derechos reservados

Desarrollos


Al navegar y hacer uso de nuestros servicios aceptas los términos y condiciones.