15 librerías de Javascript para hacer efectos de scroll impresionantes

El diseño de un sitio web cobra vida con una animación bien ejecutada. Si estás buscando las librerias apropiadas para añadir efectos a tu proyecto, he confeccionado una lista de algunas de las librerías que se pueden utilizar para dar efectos basados ​​en el evento de scroll.

Cuando el usuario se desplaza por tu página web, la acción puede ser diseñada para desencadenar una variedad de opciones de animación, como los efectos de fade, blur, 3D, parallax y más. En este ocasión te mostramos 15 librerías de JS que te pueden ayudar a lograr ese tipo de respuesta en el diseño de tu sitio web.

Scroll Reveal

Una librería que hace que sea muy sencillo eso de implementar una animación durante el scroll tanto para web y móvil. Puedes establecer un easing personalizado, rotaciones en 3D, la duración y muchos parámetros más al elemento que deseas animar.

Dependencias: Ninguna
Tamaño: 2.9kb
Licencia: MIT

Aniview

Un plugin que funciona con Animate.CSS, que activa las animaciones sólo cuando el elemento entra en el viewport, es decir, cuando lo ve el usuario.

Dependencias: jQuery
Tamaño: 1kb
Licencia: N / A

Fade Into View

Un plugin que añade un efecto fade in/out a los elementos cuando entran o salen de viewports predeterminados.

Dependencias: jQuery
Tamaño: 3.81kb
Licencia: N / A

WOW

WOW agrega animaciones de Animate.css sobre el evento scroll. Puedes configurar la duración de la animación, el delay, los offsets y las iteraciones desde el documento HTML. Para ello simplemente tienes que llamar a la clase del elemento del JS.

Dependencias: Animate.css
Tamaño: 8.23kb
Licencia: MIT

ScrollMagic

Este plugin muestra un efecto "mágico" cuando un usuario se desplaza por la página. Es perfecto para animar elementos al hacer scroll o alternar la clase CSS de un elemento concreto, todo ello basándose en la posición de la barra de desplazamiento. ScrollMagic puede trabajar junto con GSAP y VelocityJS en la creación de una escena de animación. Echa un vistazo a las demos completas aquí.

Dependencias: jQuery, GSAP, Velocity.js
Tamaño: 16.9kb
Licencia: MIT

jScrollability

jScrollability permite crear páginas web individuales mediante animaciones complejas basadas en desplazamiento de la página. Con el desplazamiento que activa el usuario, los elementos se animan en base a las posiciones del scroll. Las animaciones se ejecutan baándose en l profundidad del scroll y, por supuesto, puedes establecer el inicio y el final de la animación.

Dependencias: jQuery
Tamaño: 1.86kb
Licencia: MIT

pushIn.js

Una librería sencilla para añadir el efecto dolly-in o push-in en culquier elemento que se muestre en la página cuando se haga scroll. Es fácil de implementar: basta con añadir el comienzo, cuando debe pararse y la velocidad a los parámetros de la variable data-params datos-params dentro del documento HTML.

Dependencias: Ninguna
Tamaño: 4.94kb
Licencia: N / A

Scrollissimo

Scrollisimo es una librería de JS para insertar animaciones a la hora de llevar a cabo un desplazamiento por la página. Utiliza Greensock's Tweens y timelines para generar animaciones mucho más suaves.

Dependencias: GreenShock TweenLite / TweenMax
Tamaño: 2.94kb
Licencia: N / A

jQuery Animation Scroll Plugin

Este es un plugin de jQuery para añadir animaciones activadas mediante GreenSock. Esto hace que sea fácil animar elementos mediante un easing, un transform, un scale, rotaciones y animaciones 3D.

Dependencias: jQuery, GreenShock
Tamaño: 14kb
Licencia: GNU GPL

Circlr

Circlr te permite añadir la animación de rotación en cualquier elemento, claro está, al hacer scroll por la página. Por supuesto es compatible con cualquier tipo de dispositivo, ya sea un ordenador, una tablet o un móvil. Es perfecto para hacer una demostración de un producto el cual quieres que se vea en 360 grados cuando el usuario haga scroll.

Dependencias: ninguno
Tamaño: 6.05kb
Licencia: MIT

Scrollimator

Scrollimator te mostrará la posición y el progreso del desplazamiento, además de los valores que se pueden utilizar para modificar las animaciones tween adjuntas a un comportamiento de desplazamiento del usuario. Es compatible con el desplazamiento vertical y horizontal.

Dependencias: Ninguna
Tamaño: 37.7kb
Licencia: N / A

Crossfade

Crossfade es un plugin para añadir un efecto fade a una imagen. El efecto borroso continuará cuando el usuario se desplace mucho más abajo.

Dependencias: jQuery
Tamaño: 3.19kb
Licencia: MIT

Page Scroll Effect

Ésta es una librería creada para llevar a cabo efectos experimentales con el scroll de la página desarrollada por CodyHouse. Utiliza velocity.js en las animaciones.

Dependencias: jQuery, Velocity.js
Tamaño: 17.6kb
Licencia: N / A

jquery.parallax-scroll

Esta librería te permite añadir a suavizar un efecto de parallax suavizado cuando haces scroll vertical. Sólo tienes que importar la librería jQuery y el jquery.easing.1.3.js y, a continuación, añadir el atributo 'data-parallax" y demás parámetros opcionales a tu elemento para personalizar el efecto.

Dependencias: jQuery, jQuery.easing
Tamaño: 8.72kb
Licencia: GNU GPL

parallax.js

Parallax.js es un simple plugin que añade el efecto de scroll parallax, inspirado en el sitio web de Spotify.

Dependencias: jQuery
Tamaño: 6.63kb
Licencia: MIT

 

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
SIGUIENTE ARTÍCULO