Conoce la biblioteca de desplazamiento fullPage.js pero ahora desea crear un efecto de desplazamiento instantáneo sin él. ¡Te tenemos cubierto! Si quieres reemplazar página completa.js usted tiene algunas opciones para elegir.
Aquí hay una lista de dónde podrá encontrar los mejores alternativa a fullPage.js dependiendo de sus necesidades. Desde bibliotecas JavaScript puras hasta complementos jQuery, todos ellos haciendo un trabajo muy similar efecto:
Este complemento jQuery ha estado disponible durante casi la misma cantidad de tiempo que fullPage.js. Tiene 9.600 estrellas en Github y le proporcionará el efecto básico de desplazamiento rápido como lo hace fullPage.js.
Ventajas:
- Solo 9,6 Kb (sin considerar jQuery) frente a los 37 Kb de fullPage.js. Sin embargo, esto tiene algún costo. Ver los contras.
Contras:
- Requiere jQuery, agregando una dependencia “grande” a su sitio y ralentizando su tiempo de carga.
- ¡Ya no se mantiene y la última actualización fue en 2014! ¡Gran advertencia!
- El número de opciones configurables es mucho menor que fullpage.js.
- No admitirá secciones que no sean de pantalla completa, que son útiles para los pies de página del sitio web.
- No admite contenido desplazable dentro de las secciones.
- No es compatible con el desplazamiento vertical y horizontal al mismo tiempo.
- No tiene desplazamiento vertical continuo.
- No admite el desplazamiento con una barra de desplazamiento visible. Esto puede ser un problema bastante grande si planea usar bibliotecas de terceros que se basan en el desplazamiento de la página, como carga diferida, wow.js, scrollMagic, skrollr, efectos de paralaje, etc.
- No vendrá con viñetas de navegación o menú enlazable listo para usar. Por lo tanto, si no es muy bueno implementando JS, esto será un problema adicional.
- No viene con carga diferida como página completa y será más difícil integrarlo, ya que el evento de desplazamiento no se activa.
- La navegación con el teclado tiene algunos errores.
- No hay envoltorios oficiales para React, Vue o Angular.
- No hay complementos oficiales para WordPress.
- Sin soporte.
Una pequeña biblioteca de JavaScript de 17 Kb que lo ayudará a lograr un desplazamiento instantáneo si está buscando algo muy básico. Tenga en cuenta que la biblioteca ya no se mantiene y que la última actualización fue a principios de 2019.
Ventajas:
- Es un poco más ligero que fullPage.js. 17kb frente a 37Kb de fullPage.js. Sin embargo, como era de esperar, esto no viene gratis. Vea los contras a continuación.
- Viene con una opción de “retraso” que puede ser útil.
- Proporciona una función de “arrastre” de mouse muy básica lista para usar. fullPage.js no lo hace, pero proporciona una extensión de arrastre mucho más avanzada a un precio razonable. Funciona tanto en dispositivos de escritorio como táctiles.
Contras:
- Sin mantenimiento desde principios de 2019.
- Las transiciones no serán tan fluidas como en fullPage.js, especialmente en dispositivos de bajo presupuesto. Utiliza JavaScript para actualizar la propiedad translate3d cada pocos milisegundos en lugar de una transición CSS.
- Los dispositivos de Apple, como las computadoras portátiles o la magia de Apple, pueden sufrir una mala experiencia de usuario. La biblioteca no parece estar manejando lo suficientemente bien los dispositivos de desplazamiento cinético.
- No admite contenido desplazable dentro de las secciones, por lo que es realmente difícil crear un sitio verdaderamente receptivo.
- No permite secciones que no sean de altura completa.
- Admite desplazamiento horizontal, pero no tanto vertical como horizontal en la misma página.
- El número de opciones configurables es mucho menor que fullpage.js.
- No hay envoltorios oficiales para React, Vue o Angular.
- No hay complementos oficiales para WordPress.
Esta biblioteca de JavaScript no está diseñada para crear un efecto de desplazamiento instantáneo. De hecho, ese es uno de los usos menos comunes. ScrollMagic es una gran herramienta para animar casi cualquier cosa en función de la posición de desplazamiento. Sin embargo, con algunos trucos, puede usar esta gran biblioteca para obtener el efecto de desplazamiento instantáneo.
cavé un poco en Foros de Greensock y pude encontrar una solución basada en ScrollMagic:
Ventajas:
Contras:
- No está diseñado con un efecto de desplazamiento rápido en mente.
- Carece de muchas de las necesidades de casos de uso específicos para el desplazamiento instantáneo.
- No será fácil de implementar. Necesitarás saber realmente lo que estás haciendo aquí. No para todos.
- El ejemplo que encontré es usar la biblioteca GSAP (TweenMax) encima de scrollMagic para hacer la animación. ¡Eso es 115kb más! Me imagino que puedes reemplazar eso por animaciones jQuery o CSS. Pero eso es algo que tendrás que resolver.
PanelSnap, también conocido como jQuery.panelSnap, es una biblioteca de JavaScript que le permite crear una página básica con desplazamiento rápido a partir de secciones verticales.
La principal diferencia en este caso con fullPage.js es que no se ajustará automáticamente a la siguiente sección en el desplazamiento, solo lo hará cuando el usuario deje de desplazarse. Básicamente, funciona exactamente como funciona la función de desplazamiento instantáneo de CSS.
Además de la función de ajuste de CSS, proporciona una forma de usar un menú vinculado a cada sección y devoluciones de llamadas que pueden ser útiles.
Ventajas:
- Básicamente es CSS scroll snap con funciones adicionales, por lo que si CSS scroll snap es suficiente para ti, este podría ser un buen candidato.
- Proporciona contenedores para jQuery, Vue y React.
Contras
- Usa pinzas.js dependencia.
- Características muy básicas. No será ideal en muchos escenarios, ya que se basa en el ajuste de desplazamiento de CSS. Vea cuándo no usar css scroll snap.
- No admitirá muchos de los casos de uso específicos de desplazamiento instantáneo, como anclas en la URL, modos receptivos, historial de URL, velocidad de desplazamiento, desplazamiento continuo, etc.
- Admite desplazamiento horizontal, pero no tanto vertical como horizontal en la misma página.
- No hay complementos oficiales para WordPress.
- No hay envoltorio oficial para Angular.
Un complemento de jQuery que intenta resolver el problema del desplazamiento instantáneo. Tiene características similares a otros complementos y bibliotecas, pero parece tener algunos problemas para trabajar en dispositivos de desplazamiento cinético como las computadoras portátiles Apple y algunos trackpads de computadoras portátiles.
ventajas
- Admite secciones que no son de altura completa como fullPage.js (aunque sin ajuste automático)
- Admite anclajes de URL (aunque el historial del navegador hacia atrás/adelante no funcionará como se esperaba)
- Admite el modo híbrido (de alguna manera, pero tiene bastantes errores)
Contras
- Sin mantenimiento desde finales de 2018. ¡Gran advertencia!
- Requiere jQuery, lethargy.js y EventEmitter.js si desea utilizar devoluciones de llamada.
- Se siente bastante defectuoso en general, incluso con una rueda de mouse normal, experimentará algunos problemas técnicos al desplazarse.
- Simplemente no funcionará lo suficientemente bien si tiene una Mac o un dispositivo de desplazamiento cinético o un trackpad. Se ve muy escamoso y no será algo que quieras que tus visitantes experimenten.
- No se ajustará correctamente a las secciones al usar el desplazamiento libre o al arrastrar la barra de desplazamiento.
- Cambiar el tamaño hacia arriba o hacia abajo no mantendrá la sección activa en la ventana gráfica.
- Funciona solo con la barra de desplazamiento y no disfrutará de las animaciones aceleradas por hardware CSS3 que fullPage.js usa de manera predeterminada.
- El número de opciones configurables es mucho menor que fullpage.js.
¿Otra solución básica que podría ser suficiente para ti si buscas algo simple? Desafortunadamente no es algo que recomendaría a nadie. La página está caída y sin mantenimiento. No es algo en lo que puedas confiar.
Contras
- Sin mantenimiento desde finales de 2018. ¡Gran advertencia!
- El sitio web está caído.
- Utiliza jQuery como dependencia, así como jquery.mousewheel.js y jQuery Easing. Agregar una cantidad bastante grande de código encima del componente mismo que seguramente ralentizará la carga de la página.
Esta biblioteca Angular liviana proporciona la misma función de desplazamiento instantáneo que otras bibliotecas, pero se enfoca solo en el marco Angular y, desafortunadamente, ya no se mantiene.
ventajas
- Admite elementos de desplazamiento rápido anidados. Esto es bastante original y algo que ninguna de las otras bibliotecas hace. ¿Es realmente útil? Ese es quizás otro tema 🙂
- Soporta parcialmente elementos secundarios de mayor altura. Aunque la experiencia de desplazamiento en esos parece un poco antinatural y se limita a un desplazamiento de pantalla completa por evento de desplazamiento. fullPage.js se ocupa de esto de una manera mucho mejor.
Contras
- Sin mantenimiento desde 2017. ¡Gran advertencia!
- Solución solo angular.
- Utiliza dos dependencias: angular-wheelie.js y angular-scrollie.js.
- Muy pocas opciones configurables en comparación con fullPage.js.
Esta es una alternativa exclusiva de Vue a fullpage.js. Si está utilizando Vue.js, es posible que desee echarle un vistazo. Simplemente no olvide que fullPage.js también es compatible con Vue con su contenedor oficial.
Este componente probablemente nació cuando fullPage.js todavía era un complemento de jQuery en la versión 2 como una alternativa que no tenía dependencias. Esto no tendrá mucho sentido ahora que fullPage.js ya no usa jQuery y tiene soporte completo para Vue.
Ventajas:
Contras:
- Solo disponible para Vue.js
- No admitirá dispositivos de desplazamiento cinético como computadoras portátiles Apple o mouse mágico. Experimentarán pergaminos inesperados.
- Características muy básicas.
- Sin mantenimiento desde 2017.
Una increíble biblioteca de presentaciones basada en transformaciones y transiciones CSS3.
Nació como una solución de código alternativa a Prezique en ese momento era una alternativa a las presentaciones de PowerPoint.
Como sucede con otras bibliotecas, el objetivo de Impress.js no es crear sitios web de desplazamiento rápido. ¡Pero esto no significa que no podamos usarlo para eso también!
Contras:
- No está diseñado teniendo en cuenta el efecto de desplazamiento instantáneo.
- Carece de muchas de las necesidades de casos de uso específicos para el desplazamiento instantáneo.
- No será fácil de implementar. Necesitarás saber realmente lo que estás haciendo aquí. No para todos.
Este es en realidad el hermano menor de fullPage.js. Desarrollado por la misma persona pero con un enfoque diferente en mente. Las secciones no solo se deslizarán hacia arriba o hacia abajo, sino que se apilarán una encima de la otra en el desplazamiento. De esta manera, el desplazamiento revelará las secciones de abajo o las cubrirá con las de arriba. Le agrega algún tipo de efecto de “paralaje”.
Además de eso, cambiar a secciones no consecutivas omitirá las secciones intermedias en lugar de pasar por todas ellas.
La biblioteca todavía tiene un mantenimiento básico, pero no se actualiza con regularidad. fullPage.js ha sido claramente el más popular y el que ha captado toda la atención.
Ventajas:
- Salta secciones intermedias al desplazarse.
Contras:
- Requiere jQuery.
- Efecto ligeramente diferente.
- Muchas menos opciones que fullPage.js.
- No hay envoltorios oficiales para React, Vue o Angular.
- Mantenimiento muy básico y muy pocas actualizaciones.
Manifestación
Conclusión
Hay algunas bibliotecas que puedes usar en lugar de página completa.js, sin embargo, diría que no hay ninguno tan completo y confiable como fullPage.js. Y hay una razón para eso.
fullPage.js tiene la ventaja de ser mantenido tiempo completo por el desarrollador principal, Álvaro Trigo, y tener un pequeño equipo de personas trabajando en ello también. Desde las excelentes y rápidas personas de soporte hasta el equipo que trabaja en los complementos o envoltorios de WordPress para diferentes marcos front-end.
Además de eso, tiene muchas extensiones que puede usar para cambiar la animación predeterminada o agregar más funciones.
Su navegador no soporta la etiqueta de vídeo.
fullPage.js fue la primera biblioteca de este tipo, lanzada en 2013 y ha contado con la confianza de los grandes, como Google, eBay, Sony o McDonalds. Actualmente tiene más de 33K estrellas en GitHub (¡no es poca cosa!), decenas de miles de descargas al mes en npm, millones de visitas por mes en jsdelivery los documentos están traducidos a 6 idiomas diferentes.
Sin embargo, si está dispuesto a sacrificar algunas de las funciones que proporciona fullPage.js, o tal vez solo necesita una función de ajuste de desplazamiento muy rudimentaria y básica, entonces probablemente pueda usar una biblioteca alternativa de esta lista.
O si eres aún más radical y prefieres no usar ninguna biblioteca, puedes considerar usar Desplazamiento de instantáneas CSS. Aunque también le recomendaría que eche un vistazo a cuándo o por qué no usar el ajuste de desplazamiento de CSS también.
