¿Te gustaría aprender a crear animaciones al hacer scroll? ¿Quieres animar animar tus mientras el usuario se desplaza por tu web? En este tutorial te voy a enseñar como puedes conseguir estos efectos o animaciones utilizando html, css y la librería AOS.js.

Primero debes de saber que para crear este tipo de efecto siempre vamos a necesitar una librería extra de .js porque están calculan el desplazamiento del scroll y  disparan o añaden clase a elementos cuando el scroll llega  a su posición. Hay muchas librerías para crear animaciones al hacer scroll. Unas más complejas y otras más sencillas.

Yo hace poco he descubierto y utilizado en algunos proyectos la librería AOS.js ( aquí tienes una página con ejemplos de animaciones creadas con AOS). Me gusta bastante por que es muy sencilla de utilizar ya que las animaciones se controlan desde nuestro archivo HTML.

Este es e l proyecto donde hemos utilizado este plugin:  SIMPLE PHOTO

Antes de continuar también quiero puntualizar  que las animaciones se ejecutan al cargar la web no tiene altura suficiente para que exista un scroll.

Vídeo Tutorial: Animaciones al hacer scroll

¿Cómo instalamos esta  librería en nuestro proyecto?

Lo primero que vamos a hacer va a hacer va a ser cargar el fichero .css y .js de aos en el head de nuestra web. Puedes descargar estos archivos e incluirlos en tu equipo / servidor o cargarlos desde su cdn.

Carga del fichero CSS

Carga del fichero JS

Inicializar el plugin

Una vez que  tenemos cargados estos dos archivos vamos a inicializar el plugin. Ojo! Este código puede estar dentro de la etiqueta body o bien en un archivo .js externo que utilices para las funciones de tu  web. Yo te recomiendo la opción dos porque así no tendrás que añadirlo a todas las páginas de tu proyecto.

De esta forma ya tenemos preparada nuestra web para comenzar a añadir animaciones y movimiento a cualquier elemento. Más adelante te explicaré que opciones o parámetros podemos modificar cuando inicializamos el plugin.

¿Cómo añado una animación a cualquier elemento de mi web?

Ejemplo de web con animaciones creadas con AOS.js

Es muy sencillo. Imagínate que quieres añadir una animación a un h1 y otra con algo más de retardo al párrafo. Este sería el código. El h1 aparecería desde abajo mientras que el párrafo de arriba a abajo porque tiene la animación «fade-down».

Cómo ves la dinámica es la siguiente añadimos el atributo y valor data-aos=»fade-up» para especificar el tipo de animación ( de arriba a abajo). Y el atributo data-aos-delay=»1200″ para el retraso o delay. Este valor se escribe en milisegundos y en teste caso corresponde a 1.2 segundos.

Podemos añadir algunos atributos más para personalizar nuestras animaciones  y efectos.

¿Qué atributos podemos utilizar con AOS?

data-aos=»fade-up». Tipo de animación a aplicar
data-aos-offset=»200″. Delay o retardo de la animación.
data-aos-delay=»50″. Cuando  se dispara la animación. En este caso serían 50px antes de la parte superior del elemento
data-aos-duration=»1000″. Duración de  la animación.
data-aos-easing=»ease-in-out». Tipo  de transición.
data-aos-once=»true»: Indicamos que la animación sólo se aplica una vez y no cada vez que nos desplazamos
data-aos-anchor-placement=»top-center». La posición desde la cual se aplica o se contabiliza el offset.

¿Qué tipo de animaciones podemos añadir?

Fade animations:

• fade
• fade-up
• fade-down
• fade-left
• fade-right
• fade-up-right
• fade-up-left
• fade-down-right
• fade-down-left

Flip animations:

• flip-up
• flip-down
• flip-left
• flip-right

Slide animations:

• slide-up
• slide-down
• slide-left
• slide-right

Zoom animations:

• zoom-in
• zoom-in-up
• zoom-in-down
• zoom-in-left
• zoom-in-right
• zoom-out
• zoom-out-up
• zoom-out-down
• zoom-out-left
• zoom-out-right

Cómo ves el  uso de este librería para crear animaciones al hacer  scroll es muy sencillo. Quizás lo más complicado sea la instalación y la inicialización pero no te llevará más de 5 minutos. Además si lo prefieres puedes descargar esta plantilla para comenzar utilizar y crear tus propias animaciones.

Espero que le saques partido y puedas utilizarlo en tus proyectos. Dime que te ha parecido. ¡¡Te espero en los comentarios!!