martes, 17 de julio de 2018 a las 13:05hs por Valentina Echezuria
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.
Muy bien explicado, muchas gracias.
[…] nuestra publicación Animaciones en scroll con wow.js y animated.css se encuentran las indicaciones para utilizar una librería de animaciones css en conjunto con wow.js […]
Hola, genial el tutorial, podrias hacer uno donde se desactive la función wow.js en versiones móviles? ya que lo intento y no me funciona el código y no se que estaré haciendo mal. Gracias
Hola! gracias por tu comentario, puedes probar eliminando por jquery la clase wow en un tamaño de pantalla menor:
if ($(window).width() <= 991){ $(".wow").removeClass("wow"); }o inicializando wow.js solamente en tamaños de pantalla mayores a 992px:
if ($(window).width() > 991){ new WOW().init(); }como puedo hacer para que el div aparezca sólo cuando el scroll llegue a donde se debería mostrar el div, osea que aparescan los div de forma gradual con forme se haga scroll
Hola! una vez agregadas las 2 librerías (animate.css y wow.js) solo tienes que ponerle las clases correspondientes al div por ejemplo (div class=»wow animated fadeIn») puedes utilizar cualquier animación de quieras de la librería animate, no te olvides inicializar el script de wow:
Hola!
hay alguna forma de que solo se cargue animate y wow en la version pc? ya que no quiero activarlo en la version movil para mejorar la carga del google speed.
Gracias!
Hola!puedes desactivar todas las clases de animate solo en mobile:
@media only screen and (max-width : 768px) { .animated { /*CSS transitions*/ -o-transition-property: none !important; -moz-transition-property: none !important; -ms-transition-property: none !important; -webkit-transition-property: none !important; transition-property: none !important; /*CSS transforms*/ -o-transform: none !important; -moz-transform: none !important; -ms-transform: none !important; -webkit-transform: none !important; transform: none !important; /*CSS animations*/ -webkit-animation: none !important; -moz-animation: none !important; -o-animation: none !important; -ms-animation: none !important; animation: none !important; } }y desactivar wow.js en tamaños de pantallas menores a 991px
<script> if ($(window).width() <= 991){ $(".wow").removeClass("wow"); } </script>Hola, cómo puedo hacer que se repita la animación al hacer scroll down y scroll up, es decir, que cargue mas de una vez. 🙂
gracias
Hola, puedo agregar la clase wow a elementos mediante jquery?
Hola Marcos.
No lo probé, pero seguramente puedas agregarle los atributos con jQuery, pero después deberías volver a a llamar a la función init de Wow para que los lea.