Animate.css es una librería css que contiene una serie de animaciones aplicables a cualquier elemento de nuestra pagina, en este tutorial te mostraremos como utilizar la libreria wow.js para activar las animaciones disponibles en animate.css mientras hacemos scroll en nuestro sitio web.
Primeros pasos:
Descargamos Animate.css
Descargamos WOW.js
Una vez descargado incluimos los archivos en nuestro hmtl:
<link rel="stylesheet" href="css/animate.css"> <script src="js/wow.min.js"></script>
Ahora en primera instancia te enseñaremos a utilizar animate.css:
Le añadiremos al elemento que queremos animar la clase animated y seguido de esto el tipo de animación. En este ejemplo utilizaremos bounceInLeft.
<div class="animated bounceInLeft"> <h3>TÍTULO ANIMADO</h3> </div>
Resultado:
También podemos hacer que la animación sea infinita, incluyendo la clase infinite,
Pueden consultar todas la animaciones disponibles aquí.
En este caso la animación comenzara al cargar la pagina, esto quiere decir que si el contenido animado se encuentra al final de la pagina la animación no podrá apreciarse, por esa razón utilizaremos la librería wow.js para hacer que la animación se active al hacer scroll sobre lo elementos en el sitio web.
Primero activamos WOW:
<script> new WOW().init(); </script>
Ahora incluimos la clase wow al elemento lo que hará que desaparezca hasta que hagamos scroll para revelarlo.
<div class="wow animated bounceInLeft"> <h3>TÍTULO ANIMADO</h3> </div>
WOW permite también establecer algunos parámetros para activar la animación.
data-wow-duration: Determinar la duración de la animación
data-wow-delay: Retraso antes de que inicie la animación
data-wow-offset: Distancia para iniciar la animación (relacionado a la parte de abajo del Browser)
data-wow-iteration: numero de veces que se repite la animación
<div class="wow animated bounceInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"> <h3>TITULO ANIMADO</h3> </div>
Así podremos activar las animaciones al finalizar cada una ellas encadenando una serie de eventos, para captar la atención de los usuarios en áreas sobresalientes.
Ejemplo:
<div class="container"> <div class="col-md-4 center wow animated bounceInLeft box1" data-wow-delay="0.2s"> <h3>BOX 1</h3> </div> <div class="col-md-4 center wow animated bounceInLeft box2" data-wow-delay="0.8s"> <h3>BOX 2</h3> </div> <div class="col-md-4 center wow animated bounceInLeft box3" data-wow-delay="1.4s"> <h3>BOX 3</h3> </div> </div>
Resultado:
Con esta introducción a estas librerías podrán descubrir nuevas combinaciones de animaciones para su sitio web y de esta manera lograr que su contenido sea mas atractivo.