Rodrigo Brito

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 classejs-scroll nas seções, para permitir a seleção, seguindo o padrão deste projeto.

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.

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:

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

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 innerHeightde 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 removeda classe no else da condicional:

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.