Librerías de Javascript para hacer efectos de scroll muy chulos

Si quieres llenar de vida tu diseño web, lo mejor es utilizar animaciones. Si estás buscando las librerías para añadir efectos a tu proyecto, aquí tienes una lista de algunas librerías que se pueden utilizar para crear efectos basados en el scroll.

Cuando un usuario se desplaza hacia abajo en tu página web, dicha acción puede ser diseñada para desencadenar una variedad de opciones animadas, tales como efectos de fade, blur, 3D, parallax y mucho más. Te mostramos unas cuantas librerías que pueden ayudarte a lograr ese tipo de respuesta en el diseño de tu sitio.

Scroll Reveal

Una librería que hace que el añadir una animación al evento scroll de tu sitio sea pan comido. Funciona tanto para diseño móvil como para web, y puedes definir la rotación 3D, la duración y muchos más parámetros al elemento que quieras animar.

Aniview

Un plugin que funciona con Animate.css para habilitar animación sobre cuando el elemento se muestra al usuario.

Fade into View

Un plugin que añade efectos fade in o fade out a los elementos que entren o salgan de viewports predeterminados.

WOW

WOW mostrará animaciones de Animate.css mediante el evento scroll. Puedes definir la duración de la animación, el delay, iteraciones... en el propio diseño HTML. Solo tienes que asignar la clase correcta en el elemento que quieras animar.

ScrollMagic

Un plugin que mostrará efectos “mágicos” cuando un usuario haga scroll en la página. Es perfecto para animar/fijar un elemento, o cambiar la clase de CSS de un elemento, todo basándose en la posición del scroll. ScrollMagic funciona con GSAP y VelocityJS para crear las animaciones.

jScrollability

jScrollability te permite crear animaciones complejas en páginas web mediante el evento scroll. Cuando el usuario hace scroll, el elemento se animará en base a la posición del propio scroll. La ejecución de las animaciones se regirán por la profundidad del scroll, y, por supuesto, podrás definir el comienzo y el final de cada animación.

pushIn.js

Una librería sencilla que añade efectos dolly-in o push-in a cualquier elemento que se muestre cuando el usuario haga scroll en la página. Es muy fácil de implementar: completa los parámetros de inicio, final y velocidad al data-params de tu elemento HTML.

Scrollisimo

Esta librería de JS añade efectos suaves controlados por el scroll. Utiliza los tweens de Greensock y los timelines para generar animaciones muy, pero que muy pulidas.

Jquery Animation Scroll Plugin

Esto es otro plugin de jQuery que añade animaciones basadas en el viewport utilizando Greensock. Es muy sencillo otorgar a elementos animaciones 3D, transformaciones, escalas, rotaciones...

Circlr

Circle te permite crear una animación de rotación a un elemento, la cual se ejecuta cuando se hace scroll, con eventos de ratón o táctiles. Es perfecto para hacer una showcase de un producto que quiera ser mostrado en 360 grados.

Scrollimator

Scrollimator te muestra la posición y la progresión del scroll, y te devuelve valores que puedes utilizar para cambiar las animaciones que se basan en el evento scroll. Funciona tanto como para scroll vertical, como para scroll horizontal.

Crossfade

Crossfade es un plugin que añade efecto crossfade a una imagen. El efecto borroso perdura hasta que el usuario hace scroll y muestra la imagen completa en el viewport.

Page Scroll Effect

Esta es una librería para experimentar con los efectos de scroll creada por CodyHouse. Utiliza las animaciones de velocity.js

jquery.parallax-scroll

Esta librería te permite añadir efectos parallax basados en el scroll vertical. Solo debes importar jQuery y jquery.easing.1.3.js y después añadir el atributo data-parallax, y demás parámetros opciones, al elemento al que quieras personalizar con un efecto.

parallax.js

Parallax es un simple plugin que añade efectos de scroll parallax inspirados en la web de Spotify.

Enllax

Enllax es una librería super ligera para utilizar y aplicar efectos parallax a cualquier elemento que haga scroll. Puedes definir el fondo y lo superficial de los elementos que quieras que tengan este efecto. Funciona tanto para scroll vertical, como para scroll horizontal.

Blur on Scroll

Esra librería te ayuda a añadir un efecto blur a una imagen, el cual se ejecutará cuando el usuario haga scroll en la página. Cuanto más deslices el scroll hacia abajo, más borrosa será la imagen.

boxLoader

boxLoader es un plugin muy sencillo para cargar elemento cuando se haga scroll en la página. Los parámetros que puedes definir son las direcciones (x o y), posición en porcentaje, el efecto y también la duración.

Tilted Page Scroll

Cuando un usuario haga scroll en la página, este plugin mostrará un efecto 3D alucinante el cual puedes aplicar en cualquier elemento de tu página.

AhRelax

AhRelax te proporciona una manera muy sencilla de crear animaciones basadas en el scroll. Es muy ligero y otorga un gran rendimiento.

Fuente: hongkiat.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.