Librerías de codigo JavaScript para crear efectos de scrolling

En la actualidad, la gran mayoría de las páginas hacen uso del scrolling en una página web. El scrolling permite al usuario acceder a cierta información. En definitiva es una forma atractiva de navegar en un sitio web y nos hemos acostumbrado a ella. Sin embargo, el scrolling también ha evolucionado y con el desarrollo de las nuevas tecnologías, podemos implementar efectos y animaciones que mejoran en gran medida la interactividad de un sitio.

En este artículo te mencionamos algunas librerías de código Javascript que te permite implementar el scrolling y añadir diversos efectos de scrolling.

Elevator.js

Este script te permite añadir un botón para regresar al inicio de la página de manera inmediata. Pero eso no es todo, mientras va subiendo se escucha una música y un sonido te indica cuando llega al inicio de la página. Debido a la peculiar música y sonido final se le ha dado el nombre “Elevator” que significa “Ascensor” en español.

scrollReveal.js

Esta librería te permite crear animaciones sencillas que son reveladas sólo cuando deben, es decir, cuando los elementos entran en las dimensiones del navegador.

WOW.js

WOW.js sirve para hacer activas animaciones al momento de navegar hacia abajo en la página. De manera predeterminada funciona con la librería animate.css, pero puedes configurarlo para que funcione con tu librería de animaciones favorita.

WOW.js ofrece diversas opciones para controlas las animaciones como la duración, iteraciones, estilo, etc.

Stroll.js

Esta es una colección de diversos efectos de scrolling. Los efectos son sencillos, pero mejoran en gran medida la interactividad de cualquier sitio web.

ScrollMagic

Esta librería detecta la posición de scroll del usuario y te permite realizar animaciones según esta posición. Puedes emplearlo para añadir parallax scrolling, scrolling infinito y otros efectos en tu sitio.

Scrollability

Te permite simular el sistema de scrolling de iOS en tus aplicaciones web. Es ligero y no depende de ninguna otra librería.

Scroller.js

Esta librería te permite crear componente para interfaz de usuario. Con scroller.js puedes crear tus propios plugins o modificar aquellos que viene incluido con esta librería. Funciona correctamente en iOS, Windows, Firefox OS y Android.

Sly

Esta librería activa el scrolling en una sola dirección, de modo que puedes emplearlo también para implementar el scrolling horizontal.

Space.js

Esta librería te permite añadir efectos para narración en 3D. Sólo basta con ver la demostración para darse cuenta del poder de esta librería. Funciona con HTML por lo que es bastante flexible.

Dragscroll

Esta librería te permite implementar el scrolling en estilo drag and drop, es decir, como si fuera un elementos arrastrable. No depende de ninguna otra librería.

SuperScrollorama

Con esta librería puedes crear diversos tipos de animaciones. Es una de las librerías más avanzadas que existen por lo que tendrás que poner en práctica todos tus conocimientos de JavaScript.

Interdimensional

Esta librería te permite añadir scrolling espacial a un sitio web. Sólo funciona en dispositivos móviles ya que se activa al girar tu tableta o móvil.

Pure JS One Page Scroll

One Page Scroll te permite crear una página con scrolling al estilo del sitio web del Apple 5S. Puedes comprobar su funcionamiento en la página de descarga del mismo.

Skrollr.js

Skrollr.js te permite activar animaciones en cuanto el elemento aparece en la pantalla. Pero también te deja activas animaciones en los propios elementos. Además, puedes controlar la duración de las animaciones (en base a número de pixeles).