Cree sus propios efectos de desplazamiento de página con Roll.js
Puede encontrar docenas de bibliotecas de desplazamiento en toda la web. La mayoría están escritas en JavaScript y tienen sus propios efectos que puede cambiar de estilo para diseños de página individuales, animaciones en desplazamiento y mucho más..
Pero que pasa codificando tus propios efectos de desplazamiento? O bien, ¿qué pasa si solo desea una forma sencilla de rastrear la distancia que ha recorrido un usuario en la página??
Roll.js es la biblioteca que estás buscando. Esta El script de código abierto es una locura pequeña y muy fácil de usar. Puedes conseguir esto trabajando con unas pocas líneas de JavaScript. Y lo mejor de todo es que no te obliga a realizar nada específico, sino más bien te da las herramientas para crear sus propias características de desplazamiento personalizado.
El objetivo de esta biblioteca es ayudar a los desarrolladores a estructurar sus efectos de desplazamiento sin mucho esfuerzo..
Si echas un vistazo al repositorio principal de GitHub, encontrarás una guía de configuración completa con algunos ejemplos de fragmentos. Usted puede Ejecutar funciones para llamar a qué distancia se desplaza el usuario, o a diferente “paneles” en la pagina.
Estos funcionan mejor en diseños de una sola página, pero puede usar Roll.js por mucho.
Con una llamada de una sola función, puede extraer datos con cada desplazamiento que incluye:
- Total de pasos de página (si corresponde).
- Total% de la página desplegada.
- Posición actual en la página en píxeles.
- Altura total de la vista basada en el tamaño del dispositivo.
Esto también funciona con enlaces de salto que llevan a los usuarios hacia abajo (o arriba) a ciertas partes de la página..
Pero también puedes encontrar muchas de estas características en otras bibliotecas. Lo que hace que Roll.js sea tan especial?
Parte de esto es la sintaxis, pero el gran vendedor aquí es el tamaño total de la biblioteca de 8KB cuando está minificado Eso es bastante pequeño para una biblioteca de desplazamiento tan detallada!
Puede ver cómo funciona esto en la página principal de demostración y puede incluso descargue el código fuente de Roll.js para profundizar en esas demostraciones usted mismo.
Todo el contenido de las demostraciones en vivo y los archivos de la biblioteca sin procesar se pueden extraer de GitHub y son muy fáciles de utilizar..
Pero si tiene alguna pregunta, sugerencia o quiere compartir su agradecimiento por la increíble biblioteca, puede enviar un mensaje al creador @williamngan.
