Bibliotecas JavaScript para Efectos de Desplazamiento geniales

Un diseño de sitio web cobra vida con una animación bien ejecutada. Si está buscando las bibliotecas adecuadas para agregar efectos a su proyecto, aquí he hecho una lista de algunas de las bibliotecas que puede usar para dar efectos en función del evento de desplazamiento.

Cuando un usuario se desplaza hacia abajo de su página web, la acción se puede diseñar para activar una variedad de opciones de animación, como efectos de desvanecimiento, desenfoque, 3D, paralaje y más. Hay 25 bibliotecas JS aquí que pueden ayudarlo a lograr ese tipo de respuesta en el diseño de su sitio.

Más información: 15 ejemplos de desplazamiento realizado directamente en diseño de sitios web

Revelación de desplazamiento

Una biblioteca que facilita la adición de animación de desplazamiento para web y móvil. Puede establecer parámetros personalizados de aceleración, rotaciones 3D, duración y muchos parámetros mor en el elemento que desea animar.

Dependencias: ninguna / Tamaño: 2,9 kb | Licencia: MIT

Aniview

Un complemento que funciona junto con Animate.CSS para habilitar las animaciones solo cuando el elemento entra en la ventana.

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

Fundido a la vista

Complemento que añade el efecto fundido de entrada / salida a los elementos cuando entran o salen de vistas predeterminadas.

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

WOW

WOW revelará Animar.animaciones css sobre el evento de desplazamiento. Puede configurar la duración de la animación, los retrasos, las compensaciones y las iteraciones directamente desde el marcado HTML, luego simplemente llame a la clase del elemento desde JS.

Dependencias: Animate.css / Tamaño: 8,23 kb / Licencia: MIT

ScrollMagic

Este complemento mostrará un efecto ‘mágico’ cuando un usuario se desplaza por la página. Es perfecto para animar, fijar un elemento o alternar una clase CSS, todo basado en la posición del desplazamiento. ScrollMagic puede trabajar junto con GSAP y VelocityJS para crear una escena de animación. Vea las demostraciones completas aquí.

Dependencias: jQuery, GSAP, Velocidad.js / Tamaño: 16,9 kb / Licencia: MIT

jScrollability

jScrollability le permite crear páginas web únicas con animaciones complejas basadas en desplazamiento. Al desplazar el usuario, el elemento se animará en función de las posiciones de desplazamiento. Las animaciones se ejecutan en función de la profundidad de desplazamiento y, por supuesto, puede establecer el inicio y el final de la animación.

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

pushIn.js

Una biblioteca sencilla para agregar el efecto dolly-in o push-in a cualquier elemento que funcione cuando un usuario se desplaza por la página. Es fácil de implementar: simplemente agregue los parámetros de inicio, parada y velocidad a data-params a su elemento HTML.

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

Scrollissimo

Esta es una biblioteca JS para agregar animaciones suaves controladas por desplazamiento. Utiliza las interpolaciones y las líneas de tiempo de Greensock para generar animaciones más suaves.

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

Complemento de desplazamiento de animación jQuery

Este es un complemento de jQuery para agregar animación activada por la ventana de visualización utilizando Greensock. Facilita la animación de elementos con animaciones en 3D, transformación, escala y rotación.

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

Circlr

Circlr le permite crear la animación de rotación a un elemento, activada por desplazamiento, eventos de ratón o eventos táctiles. Es perfecto para hacer un escaparate de un producto que se puede ver desde los 360 grados, activado por desplazamiento del usuario.

Dependencias: ninguna / Tamaño: 6.05 kb / Licencia: MIT

Scrollimator

Scrollimator le mostrará la posición y el progreso del desplazamiento, y devolverá valores que puede usar para cambiar las animaciones de interpolación asociadas al comportamiento de desplazamiento del usuario. Soporta desplazamiento vertical y horizontal.

Dependencias: ninguna / Tamaño: 37.7 kb | Licencia: N / A

Fundido cruzado

Fundido cruzado es un complemento para agregar el efecto fundido cruzado a una imagen. El efecto borroso continuará a medida que el usuario se desplace más hacia abajo.

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

Efecto de desplazamiento de página

Esta es una biblioteca para efectos experimentales de desplazamiento de página creados por CodyHouse. Utiliza velocidad.animaciones js.

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

jquery.parallax-scroll

Esta biblioteca le permite agregar un efecto de paralaje suave al desplazamiento vertical de la página. Solo importa jQuery y jquery.aliviar.1.3.js, luego agregue el atributo 'data-parallax' y los parámetros opcionales al elemento para personalizar el efecto.

Dependencias: jQuery, jQuery.flexibilización / Tamaño: 8,72 kb / Licencia: GNU GPL

paralaje.js

Paralaje.js es un plugin sencillo que añade el efecto de desplazamiento de paralaje, inspirado en el sitio web de Spotify.

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

Enllax

Enllax es una biblioteca súper ligera para aplicar el efecto de paralaje a cualquier elemento de desplazamiento. Puede establecer elementos de fondo o de primer plano en hav este efecto. Funciona tanto para desplazamiento vertical como horizontal.

Dependencias: jQuery | Tamaño: 1.53 kb / Licencia: MIT

Desenfoque en desplazamiento

Esta biblioteca le ayuda a agregar el efecto de desenfoque a una imagen, que se activará al desplazarse por la página. Cuanto más se desplace por la página, más borrosa se volverá la imagen.

Dependencias: ninguna / Tamaño: 1.1 kb / Licencia: N / A

boxLoader

boxLoader es un complemento simple para cargar elementos al desplazarse por la página. El parámetro que debe establecer son las direcciones (x o y), la posición en porcentaje, el efecto y también la duración.

Dependencias: jQuery / Tamaño: 3,42 kb | Licencia: N / A

Desplazamiento de página inclinado

A medida que un usuario se desplaza a través de una página, este complemento revelará un impresionante efecto inclinado en 3D para el elemento que configuraste.

Dependencias: jQuery / Tamaño: 1,5 kb / Licencia: GNU GPL

AhRelax

AhRelax proporciona una forma de hacer animaciones rápidas basadas en desplazamiento. Es ligero y también tiene un gran rendimiento. Puedes leer más al respecto aquí.

Dependencias: jQuery / Tamaño: 1,6 kb | Licencia: MIT

Desplazamiento elegante

Si alguna vez ves el efecto desplazamiento de desbordamiento en Android o iOS, con este complemento ahora puedes aplicarlo a tu sitio. Puede agregar una animación, ya sea un rebote o un brillo, cuando un usuario llegue a la parte superior/inferior de la página.

Dependencias: jQuery / Tamaño: 2.64 kb | Licencia: GNU GPL

Desplazamiento de imagen de paralaje

Este complemento hará que los elementos floten y se muevan a medida que un usuario se desplaza hacia abajo o hacia arriba de la página.

Dependencias: jQuery | Tamaño: 8.69 kb | Licencia: MIT

Rlsmooth

Este es un pequeño complemento para crear el efecto de flujo cuando un usuario navega hacia abajo o hacia arriba de la página. Hay tres efectos disponibles: deslizar, desvanecer y mostrar.

Dependencias: jQuery / Tamaño: 1,95 kb | Licencia: MIT

Scrollme

Añade efectos simples al desplazamiento de páginas, como escalar, rotar, traducir y cambiar la opacidad de los elementos. Es fácil de configurar: solo importa el jQuery, este complemento, y establece los parámetros de animación en el marcado del elemento.

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

Parallax ImageScroll

Este complemento le permite dar un efecto de paralaje a cualquier imagen de su página. Hace uso de la transformación CSS3 para hacer que el efecto funcione. Este plugin es compatible con jQuery y AMD.

Dependencias: jQuery / Tamaño: 8.01 kb / Licencia: MIT