Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. jQuery
Webdesign

Como Criar um Indicador de Rolagem de Página com jQuery e SVG

by
Difficulty:IntermediateLength:MediumLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

a

Hoje, veremos algumas técnicas que podemos usar para mostrar o progresso da rolagem de páginas que o usuário esteja lendo. Essa técnica tem sido usada por um crescente número de sites e por uma boa razão: ela provê um retorno do tempo a ser investido para consumir uma página em particular. De acordo com que o usuário rola a página, eles são apresentados a um progresso atual em diferentes formatos. 

As seen on ia.net

Hoje, mostrarei duas técnicas específicas que podem ser usadas para mostrar essa progressão, dando-lhe a oportunidade de criar o seu próprio indicador usando esse conjunto de ferramentas. Comecemos!

Preparando o Documento

Primeiro, prepararemos um documento que funcionará como nossa página. Nós usaremos o normalize.css e a jQuery, assim como uma fonte lá do Google font. Seu arquivo HTML deve parecer mais ou menos com isso:

O próximo passo é adicionar o conteúdo falso da nossa página:

Isso nos dá conteúdo suficiente para testar o comportamento da rolagem.

Estilização Básica

Usaremos uma estilização básica para fazer nossa página aparentar ser mais atrativa.

Cálculo da Posição da Barra de Rolagem

Para calcular a posição da barra de rolagem, precisamos entender o conceito do que estamos rastreando. Uma vez que o JavaScript só é capaz de rastrear o valor rolado começando do topo da página, precisaremos rastrear a partir do valor 0 (bem no topo, sem qualquer rolagem), até o valor que seja o final da rolagem. O valor final será igual ao tamanho total do documento menos o tamanho da tela em si (uma vez que que o documento será rolado até que o final dele alcance o final da janela).

Usaremos o código JavaScript abaixo para calcular a posição da barra.

O código acima obtem o valor da altura da janela e do corpo da página, e quando o usuário rolar a página, usaremos esses valores para configurar o valor da variável perc (abreviação para percentage). Também utilizamos Math.min e Math.max para limitar os valores ao intervalo 0-100.

Com o cálculo desse percentual, podemos manipular o indicador de progressão.

Indicador Circular

O primeiro indicador que falaremos será o de círculo em SVG. Utilizaremos as propriedades stroke-dasharray e stroke-dashoffset do SVG para mostrar a progressão. Primeiro, adicionemos o indicador ao documento.

Esse trecho nos mostra dois círculos em SVG, assim como uma div para mostrar o nosso percentual. É preciso adicionar estilos a esses elementos também. Depois disso, explicaremos como esses círculos serão posicionados e animados.

Esses estilos preparam os círculos para a animação. Nosso indicador de progressão sempre deve estar visível, assim, o fixamos com a classe .progress-indicator, usando regras de posicionamento e tamanho. Também centralizaremos a contagem da progressão, tanto vertical quanto horizontalmente, dentro da div.

Os círculos são posicionados no centro usando a propriedade transform, diretamente, nos elementos SVG. Começamos o centro do nosso círculo com a transform. Usamos uma técnica que permite aplicarmos uma rotação a partir do centro de nossos círculos, de modo que possamos começar a animação a partir do topo do círculo (ao invés do lado direito dele). No SVG, transform é aplicado a partir do topo esquerdo de um elemento. É por isso que precisamos centralizar nossos círculos na posição 0, 0 e mover o centro do próprio círculo para o centro da área do SVG, usando translate(50, 50).

Usando stroke-dasharray e stroke-dashoffset

As propriedades stroke-dasharray e stroke-dashoffset permitem aplicar bordas a um SVG. A stroke-dasharray define as partes visíveis da borda. A stroke-dashoffset move o começo da borda. Esses atributos combinados nos ajudam a criar o processo de animação.

Atualizando stroke-dasharray Com Base na Rolagem

Agora, adicionaremos uma função para atualizar a stroke-dasharray baseado na rolagem, usando a progressão percentual apresentada anteriormente.

O deslocamento que combina com nosso círculo inicia em 126. É importante notar que isso não funciona para todos os círculos, uma vez que 126 é aproximadamente a circunferência de um círculo com 20 de raio. Para calcular o valor de stroke-dashoffset para um dado círculo, multiplique seu raio por 2PI. Em nosso caso, o deslocamento exato seria 20 * 2PI = 125.66370614359172.

Variação Horizontal da Progressão

Em nosso próximo exemplo, faremos uma simples barra horizontal, fixada ao topo da janela. Para conseguir esse efeito, usaremos uma div vazia para indicar a progressão.

Nota: Nós adicionamos o sufixo "-2" para permitir a inclusão desse exemplo no mesmo arquivo CSS.

Agora, adicionaremos a estilização desse elemento.

finalmente, configuraremos a largura da barra de progresso a partir da barra de rolagem.

O nosso JavaScript finalizado e completo deve ficar mais ou menos assim:

Outras Ideias Para Barras de Progressão

Esse artigo foi pensado para mostrar o básico a você, de forma que se inspire e crie suas próprias soluções para indicação de progressão. Outras ideais para barras de progresso podem incluir algo mais descritivo ou termos humanizados, como "quase lá" ou "apenas começando". Algumas implementações (como a da ia.net apresentada anteriormente) usam uma estimativa do tempo de leitura de um artigo. Esse tempo pode ser estimado usando um código parecido com o do trecho abaixo:

Assim, você usaria a variável minCount junto a perc para apresentar ao leitor o tempo que falta para terminar de ler o artigo. Eis uma implementação bem básica desse conceito.

Um Último Ponto: Telas de Tamanhos Adaptáveis

Para garantir que nosso indicador funciona como devido, devemos garantir que nossos cálculos estão corretos a qualquer momento. Para que isso aconteça, precisamos recalcular as alturas e atualizar o indicador de progresso quando o usuário redimensionar a janela. Eis uma adaptação do JavaScript para tornar isso possível:

Nesse código, temos uma função que configura as variáveis necessárias para calcular a progressão em qualquer tamanho de tela, sendo executada toda vez que a tela é redimensionada. Também ativamos novamente a rolagem na janela para que nossa função updateProgress seja executada.

Chegamos ao Fim!

Tendo dado os fundamentos para os mais variados tipos de indicadores, o que você pode fazer mais? Quais indicadores de progresso você tem visto? E quais indicadores são ruins para usabilidade? Compartilhe suas experiências nos comentários!

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.