Página principal » UI / UX » Desplazamiento de página completa sin problemas con el complemento jQuery viewScroller.js

    Desplazamiento de página completa sin problemas con el complemento jQuery viewScroller.js

    Efectos de desplazamiento de JavaScript Han existido por años con docenas de bibliotecas excelentes para elegir. Pero un nuevo contendiente en el campo es viewScroller.js.

    Esta biblioteca muy pequeña pero poderosa puede construir diseños de una sola página ese desplazarse como bloques Con solo deslizar la rueda de desplazamiento (o panel táctil). Esto crea un diseño controlado donde los desplazamientos mueven al usuario a través de secciones individuales de una página con precisión ajustada a píxeles.

    Naturalmente, esta es una biblioteca completamente gratuita. disponible en GitHub y facil de instalar con Bower o npm.

    Sin embargo, viewScroller.js es no una biblioteca de JavaScript independiente. Se basa en jQuery y dos complementos específicos: jQuery Mousewheel y jQuery Easing. Estos son ambos requeridos para que los efectos de desplazamiento funcionen correctamente.

    Esto puede dificultar el valor de viewScroller ya que requiere algunas bibliotecas JS para funcionar. Pero si ya estás usando jQuery de todos modos, es una obviedad. viewScroller.js ofrece el método más simple para obtener una aplicación web de desplazamiento de una sola página corriendo sin mucho codigo.

    Lo hace, sin embargo, Usa clases muy detalladas e IDs. para crear el efecto de desplazamiento. Usted puede editar estas clases en su propio archivo CSS o sobrescribirlos En el código base. Encontrarás un Lista llena en la página de repo con nombres de clase y datos de configuración por defecto.

    La forma más sencilla de empezar es por clonando las demos de viewScroller. Tienen uno con una barra lateral derecha, otro con una barra lateral izquierda y uno con dos barras laterales que encajan el contenido en el medio.

    Si estás de acuerdo con una aplicación web con jQuery, viewScroller es una fantástica biblioteca gratuita para usar. Se necesita bastantes dependencias pero no deberían ser difíciles de configurar.

    Echa un vistazo a la demo en vivo Y mira lo que piensas. Si te gusta el UX y el comportamiento de desplazamiento, sigue el guía de configuración en GitHub Para empezar.