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