Scrolling y animación con WOW.js

Existe una clara tendencia en el diseño a utilizar la barra del desplazamiento del navegador para revelar animaciones, para lograrlo podemos utilizar varias alternativas, algunas más complicadas que otras. Si lo que estan buscando es una solución rapida, sencilla y eficiente, quiero recomendarles WOW.js.

WOW.js es una pequeña biblioteca escrita en JavaScript para mostrar animaciones según la posición del scroll. Para funcionar utilizar principalmente JavaScript para detectar la posición exacta del desplazamiento y para las animaciones CSS, empleando para esto último la hoja de estilo animate.css.

WOW.js tiene grandes ventajas si lo comparamos con otras alternativas para hacer animaciones CSS al hacer scroll, pero su principal característica se encuentra en su sencilla implementación. WOW.js se instala en unos pocos minutos y prácticamente no necesita ninguna configuración, más allá de agregar algunas clases de nombres predefinidos a las animaciones que queremos vincular con el scroll.

Ejemplo de animación según barra de desplazamiento:

HTML:

<section class="wow slideInLeft"></section>
<section class="wow slideInRight"></section>

JavaScript:

new WOW().init();

Eso es todo. Muy simple.

Otro detalle para destacar es que esta herramienta permite configurar y personalizar las animaciones y el modo de ejecutarse utilizando la etiqueta data. Por ejemplo podemos definir la duración, una pausa y hasta un offset (respecto a la posición del scroll).

HTML:

<section class="wow slideInLeft" 
   data-wow-duration="2s" 
   data-wow-delay="5s"></section>

<section class="wow slideInRight" 
   data-wow-offset="10"  
   data-wow-iteration="10"></section>

JavaScript:

wow = new WOW(
  {
    boxClass:     'wow',      // default
    animateClass: 'animated', // default
    offset:       0           // default
  }
)
WOW.init();

En el apartado de Github del proyecto pueden ver varios ejemplos.

Reconozco que hasta el momento esta herramienta es la que me resultó más sencilla de utilizar, además si conocemos como utilizar los efectos de animate.css tendremos gran parte del trabajo listo.