JS-0312 - JavaScript Completo ES6 - Animação ao Scroll

JS-0312 - JavaScript Completo ES6 - Animação ao Scroll
Publicado em 09/02/2021 23h16
Visualizações: 724

Revelando conteúdo com estilo!

Para os exemplos será utilizado o conteúdo do projeto. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

A animação ao scroll tem como propósito apresentar o conteúdo das seções no momento em que estas entrarem na área de visualização do navegador, acompanhando o movimento do scroll. Para suavizar esse surgimento do conteúdo das seções, será implementada um deslizamento horizontal, suavizando a entrada.

Para tanto, será acrescentada a classe js-scroll nas seções, para permitir a seleção, seguindo o padrão deste projeto.

JS-0312 - JavaScript Completo ES6 - Animação ao Scroll

Após a inserção da classe, precisaremos acompanhar a distância de cada elemento selecionado em relação ao topo da página. Isso é possível utilizando o método getBoundingClientRect, que possui a propriedade top, que retorna o valor do elemento em relação ao topo da página.

JS-0312 - JavaScript Completo ES6 - Animação ao Scroll

Quando o elemento chega na altura acima do seu topo, esta propriedade retorna um valor negativo, logo, poderemos utilizar este evento para adicionar um estilo no elemento:

JS-0312 - JavaScript Completo ES6 - Animação ao Scroll

No CSS, esta classe receberá os parâmetros para definir sua transição na opacidade e animação de entrada:

JS-0312 - JavaScript Completo ES6 - Animação ao Scroll

Desse modo, a entrada irá ocorrer somente quando o elemento atingir o topo.

Uma altura que fica legal para a execução da entrada dos elementos é em cerca de 60% da altura da tela. Para obter esse valor, podemos usar a propriedade innerHeight de window e multiplicar por 0.6. Esse valor será subtraido da constante sectionTop.

Para simplificar as operaçõs, poderemos verificar neste ponto se o valor é negativo. Caso true, executa a adição de classe active. A classe active pode ser removida no sentido contrário, subida do scroll, incluindo um remove da classe no else da condicional:

JS-0312 - JavaScript Completo ES6 - Animação ao Scroll

Para permitir que a primeira seção fique visível no carregamento da página, a função activeAnimation já é carregada iniciada.

Para visualizar o projeto em andamenteo, clique aqui.

Para baixar o projeto, clique aqui.

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.