Esta vez hemos preparado un artículo que os podrá ayudar a darle un toque más original y moderno a vuestra web o sitios que estéis desarrollando. Se trata de la librería AOS (Animate On Scroll).
Como su nombre en inglés indica, esta librería nos proporciona una serie de animaciones a los bloques de nuestro html cuando nos situemos en la posición del elemento haciendo scroll.
La primera funcionalidad que se le viene a la cabeza a todo el mundo que descubre esta librería, es animar la aparición de los elementos de un listado: noticias, productos, contactos… Pero ¿cómo animamos nuestros elementos?
Lo primero que tenemos que hacer es descargarnos la librería y añadirla a nuestro proyecto. Desde el sitio oficial podemos descargar los archivos aos.css y aos.js para incluirlos en nuestro sitio.
En el caso de Drupal lo haremos en la carpeta de css y js de nuestro tema. Recordad que debemos incluir la carga de esto ficheros desde el .info de dicho tema.
Supongamos que tenemos un contenedor de noticias con un html parecido a este:
<div class="news-container">
<div class="news">
...
...
</div>
<div class="news">
...
...
</div>
<div class="news">
...
...
</div>
<div class="news">
...
...
</div>
</div>
Para darle los efectos a los elementos simplemente hay que añadir atributos html que proporciona la librería a los divs con clase news. Por ejemplo, para que los elementos aparezcan de abajo arriba con un efecto de fade el código anterior quedaría así:
<div class="news-container">
<div data-aos="fade-up" class="news">
...
...
</div>
<div data-aos="fade-up" class="news">
...
...
</div>
<div data-aos="fade-up" class="news">
...
...
</div>
<div data-aos="fade-up" class="news">
...
...
</div>
</div>
Por último, hay que añadir el siguiente script que inicializa la clase AOS:
AOS.init();
El ejemplo anterior puede ser el más sencillo que se os ocurra pero podemos dar estos efectos a cualquier elemento de nuestro html. En el atributo data-aos seleccionamos la animación del elemento: fade-up, fade-left, flip-right, flip-down…
Efecto de entrada fade, flip y zoom:
Hay más atributos que personalizan tu animación a tu gusto, por ejemplo:
Estas opciones también se pueden poner en la función init para que afecten a todos los elementos data-aos que tengamos en el html:
AOS.init({
offset: 120,
delay: 500,
duration: 400,
easing: 'ease'
});
Otro ejemplo que queda podría resultar curioso, es añadir el atributo data-aos="fade-up" en la etiqueta body de todas las páginas de la web. Esto hace que todo el sitio aparezca con esta animación al cambiar de página.
En la documentación oficial tenéis detalladas todas las opciones de personalización.
Si te gustan las animaciones y novedosas para tu web, no dudes en contactar con nosotros, ya sabes que estaremos encantados de hablar.
