Rolagem suave de página inteira com jQuery Plugin viewScroller.js

Efeitos de rolagem JavaScript existem há anos com dezenas de ótimas bibliotecas para escolher. Mas um novo candidato no campo é viewScroller.js.

Esta pequena e poderosa biblioteca pode construir layouts de página única naquela rolar como blocos com um toque da roda de rolagem (ou touchpad). Isso cria um layout controlado em que os pergaminhos movem o usuário por seções individuais de uma página com precisão de pixel-tight.

Naturalmente, esta é uma biblioteca completamente livre disponível no GitHub e fácil de instalar com Bower ou npm.

No entanto, viewScroller.js é não uma biblioteca JavaScript independente. Ele depende do jQuery e de dois plugins específicos: jQuery Mousewheel e jQuery Easing. Esses são ambos são necessários para obter os efeitos de rolagem funcionando corretamente.

Isso pode dificultar o valor de viewScroller, pois requer algumas bibliotecas JS apenas para funcionar. Mas se você já estiver usando o jQuery de qualquer maneira, então é um acéfalo. viewScroller.js oferece o método mais simples para obter um aplicativo da web de rolagem de página única correndo sem muito código.

No entanto,, use classes e identificações muito detalhadas para criar o efeito de rolagem. Você pode editar essas classes no seu próprio arquivo CSS ou sobrescreva-os no código base. Você encontrará um lista completa na página de repo com nomes de classe e dados de configuração padrão.

A maneira mais simples de começar é por clonando as demos do viewScroller. Eles têm um com uma barra lateral direita, outro com uma barra lateral esquerda e um com dois sidebars que imprimem conteúdo no meio.

Se você está bem com um aplicativo web alimentado por jQuery, o viewScroller é uma fantástica biblioteca gratuita para usar. Precisa algumas dependências mas eles não devem ser difíceis de configurar.

Dê uma olhada no demonstração ao vivo e veja o que você pensa. Se você gosta do UX e do comportamento de rolagem, siga o guia de configuração no GitHub para começar.