Crie seus próprios efeitos de rolagem de página com o Roll.js
Você pode encontrar dezenas de bibliotecas de rolagem em toda a web. A maioria é escrita em JavaScript e tem seus próprios efeitos, e você pode estilizar de novo para layouts de página única, animações on-scroll e muito mais.
Mas e sobre codificando seus próprios efeitos de rolagem? E se você quiser apenas uma maneira simples de rastrear o quão longe a página do usuário rolou??
Roll.js é a biblioteca que você está procurando. este script de código aberto é louco pequeno e super fácil de usar. Você pode fazer isso funcionar com algumas linhas de JavaScript. E o melhor de tudo, não o força a fazer nada específico, mas sim dá-lhe as ferramentas para criar seus próprios recursos de rolagem personalizados.
O objetivo dessa biblioteca é ajudar os desenvolvedores a estruturar seus efeitos de rolagem sem muito esforço.
Se você der uma olhada no repo principal do GitHub, você encontrará um guia completo de configuração com alguns exemplos de trechos. Você pode executar funções para chamar até onde o usuário rola, ou para diferentes “painéis” na página.
Estes funcionam melhor em layouts de página única, mas você pode usar o Roll.js para muito.
Com uma única chamada de função, você pode extrair dados com cada rolagem que inclui:
- Etapas totais da página (se aplicável).
- Total% da página rolada.
- Posição atual na página em pixels.
- Altura total da janela de visualização com base no tamanho do dispositivo.
Isso também funciona com links de salto que trazem os usuários para baixo (ou para cima) para certas partes da página.
Mas você também pode encontrar muitos desses recursos em outras bibliotecas. O que torna o Roll.js tão especial?
Parte disso é a sintaxe, mas o grande vendedor aqui é o tamanho total da biblioteca de 8 KB quando minificado. Isso é muito pequeno para uma biblioteca de rolagem tão detalhada!
Você pode ver como isso funciona na página principal de demonstração e você pode até baixe o código-fonte do Roll.js para acessar essas demos.
Tudo a partir das demonstrações ao vivo e dos arquivos brutos da biblioteca podem ser extraídos do GitHub e são super fáceis de trabalhar.
Mas se você tiver dúvidas, sugestões ou quiser compartilhar seus agradecimentos pela incrível biblioteca, você pode enviar uma mensagem para o criador @williamngan.
