Bibliotecas de JavaScript para efectos de desplazamiento fresco
El diseño de un 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 Puedes usar para dar efectos basados en el evento de desplazamiento..
Cuando un usuario se desplaza por su página web, la acción puede ser diseñado para activar una variedad de opciones de animación como efectos de desvanecimiento, desenfoque, 3D, paralaje y más. Aquí hay 25 bibliotecas JS que pueden ayudarlo a lograr ese tipo de respuesta en el diseño de su sitio..
Desplazar Revelar
Una biblioteca que facilita la adición de animación de desplazamiento para web y móvil. Puede configurar la aceleración personalizada, las rotaciones 3D, la duración y muchos más parámetros para el elemento que desea animar.
Dependencias: ninguno | Tamaño: 2.9kb | Licencia: MIT
Aniview
Un complemento que funciona junto con Animate.CSS para habilitar las animaciones solo cuando su elemento entra en la ventana gráfica..
Dependencias: jQuery | Tamaño: 1kb | Licencia: N / A
Desvanecerse en vista
Un complemento que agrega el efecto de atenuación de entrada / salida a los elementos cuando entran o salen de las vistas predeterminadas.
Dependencias: jQuery | Tamaño: 3.81kb | Licencia: N / A
GUAU
WOW revelará las animaciones de Animate.css en 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 llame a la clase del elemento desde JS.
Dependencias: Animate.css | Tamaño: 8.23kb | Licencia: MIT
ScrollMagic
Este complemento mostrará un efecto 'Mágico' cuando un usuario desplaza la página. Es perfecto para animar, anclar un elemento o alternar la clase CSS, todo en función de la posición de desplazamiento. ScrollMagic puede trabajar junto con GSAP y VelocityJS en la creación de una escena de animación. Vea las demos completas aquí.
Dependencias: jQuery, GSAP, Velocity.js | Tamaño: 16.9kb | Licencia: MIT
jScrollabilidad
jScrollability le permite crear páginas web únicas con animaciones complejas basadas en desplazamiento. Al enrollar al usuario, el elemento se animará según las posiciones de desplazamiento. Las animaciones se ejecutan según la profundidad de desplazamiento y, por supuesto, puede establecer el inicio y el final de la animación..
Dependencias: jQuery | Tamaño: 1.86kb | Licencia: MIT
pushIn.js
Una biblioteca simple 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 parametros de datos a su elemento HTML.
Dependencias: ninguna | Tamaño: 4.94kb | Licencia: N / A
Scrollissimo
Esta es una biblioteca de JS para agregar animaciones suaves controladas por desplazamiento. Utiliza las interpolaciones y líneas de tiempo de Greensock para generar animaciones más suaves.
Dependencias: GreenShock TweenLite / TweenMax | Tamaño: 2.94kb | Licencia: N / A
Complemento de desplazamiento de animación jQuery
Este es un complemento de jQuery para agregar animación activada por viewport usando Greensock. Facilita la animación de elementos con animación, transformación, escala, rotación y animaciones 3D..
Dependencias: jQuery, GreenShock | Tamaño: 14kb | Licencia: GNU GPL
Circlr
Circlr le permite crear la animación de rotación de un elemento, activada por el desplazamiento, los eventos del mouse o los eventos táctiles. Es perfecto para hacer un escaparate de un producto que se puede ver desde todos los 360 grados, activado por el desplazamiento del usuario.
Dependencias: ninguna | Tamaño: 6.05kb | Licencia: MIT
Scrollimador
Scrollimator le mostrará la posición y el progreso del desplazamiento, y devolverá los 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.7kb | Licencia: N / A
Fundido cruzado
Crossfade es un complemento para agregar el efecto de crossfade a una imagen. El efecto borroso continuará a medida que el usuario se desplaza hacia abajo..
Dependencias: jQuery | Tamaño: 3.19kb | Licencia: MIT
Efecto de desplazamiento de página
Esta es una biblioteca para efectos de desplazamiento de página experimentales creados por CodyHouse. Utiliza velocitey.js animaciones.
Dependencias: jQuery, Velocity.js | Tamaño: 17.6kb | 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.easing.1.3.js, luego agrega el 'paralaje de datos' Atribuye y 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 complemento simple que agrega el efecto de desplazamiento de paralaje, inspirado en el sitio web de Spotify..
Dependencias: jQuery | Tamaño: 6.63kb | Licencia: MIT
Enllax
Enllax es una biblioteca súper liviana para usar en la aplicación del efecto de paralaje a cualquier elemento de desplazamiento. Puede establecer elementos de fondo o de primer plano para tener efecto ethis. Funciona tanto para desplazamiento vertical como horizontal..
Dependencias: jQuery | Tamaño: 1.53kb | Licencia: MIT
Desenfoque en el desplazamiento
Esta biblioteca le ayuda a agregar el efecto de desenfoque a una imagen, que se activará con el desplazamiento de la página. Cuanto más se desplaza por la página, más borrosa se vuelve la imagen..
Dependencias: ninguna | Tamaño: 1.1kb | Licencia: N / A
BoxLoader
boxLoader es un complemento simple para cargar elementos en el desplazamiento de página. El parámetro que debe establecer son las direcciones (x o y), la posición sobre el porcentaje, el efecto y también la duración.
Dependencias: jQuery | Tamaño: 3.42kb | 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 3D en el elemento que configuró.
Dependencias: jQuery | Tamaño: 1.5kb | Licencia: GNU GPL
AhRelax
AhRelax proporciona una manera de hacer animaciones rápidas basadas en desplazamiento. Es ligero y también tiene un gran rendimiento. Puedes leer más sobre esto aquí.
Dependencias: jQuery | Tamaño: 1.6kb | Licencia: MIT
Desplazamiento de lujo
Si alguna vez ve el efecto de desplazamiento de desbordamiento en Android o iOS, con este complemento ahora puede aplicar esto a su sitio. Puede agregar una animación, ya sea un rebote o brillo, cuando un usuario llega al principio o al final de la página..
Dependencias: jQuery | Tamaño: 2.64kb | Licencia: GNU GPL
Desplazamiento de la imagen de paralaje
Este complemento hará que los elementos floten y se muevan a medida que un usuario se desplaza hacia abajo o arriba de la página..
Dependencias: jQuery | Tamaño: 8.69kb | Licencia: MIT
Rlsmooth
Este es un pequeño complemento para crear el efecto de flujo cuando un usuario recorre la página o sube. Hay tres efectos disponibles: deslizar, desvanecer y mostrar..
Dependencias: jQuery | Tamaño: 1.95kb | Licencia: MIT
Scrollme
Agrega efectos simples al desplazamiento de la página, como escalar, rotar, traducir y cambiar la opacidad de los elementos. Es fácil de configurar: solo importa el jQuery, este complemento, y configura los parámetros de animación en el marcado del elemento.
Dependencias: jQuery | Tamaño: 5.45kb | Licencia: N / A
Parallado ImageScroll
Este complemento te permite dar un efecto de paralaje a cualquier imagen de tu página. Hace uso de CSS3 Transform para hacer que el efecto funcione. Este plugin tiene soporte para jQuery y AMD..
Dependencias: jQuery | Tamaño: 8.01kb | Licencia: MIT
