Animação de rolagem de página usando ScrollReveal

Olá, seja muito bem vindo(a), no artigo de hoje vamos aprender a utilizar o ScrollReveal nas nossas páginas web. Com ele, ao usuário rolar a página ocorre uma animação em javascript no qual nossos componentes desta página vão aparecendo e os anteriores vão sumindo.

A página do ScrollReveal é essa: https://scrollrevealjs.org/. Nela você pode visualizar como essa biblioteca funciona. Para esse tutorial vou utilizar o projeto de e-commerce que estou desenvolvendo. Primeiro vamos para a página index.html do projeto, na página do ScrollReveal tem um guia de instalação: https://scrollrevealjs.org/guide/installation.html, nele temos a tag de script que vamos colocar na nossa página, ele deve ficar acima do script principal para funcionar.

<script src="https://unpkg.com/scrollreveal"></script>

Agora devemos ir até o nosso arquivo javascript linkado à página, nele vamos adicionar uma constante chamada scrollReveal que recebe as especificações que precisamos. a origem dos componentes será o topo, ou seja, eles vão surgir de cima para baixo na animação, a duração dessa animação ficou com 700 e o resete está como false para que o ScrollReveal só ocorra uma vez quando o usuário estiver na página, se ele voltar para cima dando scroll ele não ver mais a animação.

const scrollReveal = ScrollReveal({
 origin: 'top',
 distance: '30px',
 duration: 700,
 reset: false,
})

Agora temos que linkar essas especificações nas nossas tags da página do e-commerce, para isso chamamos nossa constante e abrimos uma função reveal da biblioteca, abaixo dela colocamos uma especificação para o intervalo entre a animação de cada tag.

scrollReveal.reveal(
 ' ',
 {
interval: 100,
 },
)

Dentro da função reveal, nas aspas, vamos colocar as classes das nossas tags, sendo que algumas devem apresentar a hierarquia estrutural, como por exemplo, se quisermos animar a logo da página, que está dentro do cabeçalho, primeiro vamos colocar a classe do cabeçalho seguida da classe da div da logo. 

scrollReveal.reveal(
 '.c-header .c-header__logo',
 {
interval: 100,
 },
)

Dessa forma a logo do nosso cabeçalho irá receber a animação de scroll. Concluindo as demais classes da página inicial do e-commerce temos o código final da seguinte forma:

scrollReveal.reveal(
 '.c-header .c-header__logo, .c-header .c-header__button-login, .c-banner h2, .c-banner p, .c-banner .c-banner__button, .c-section .c-section__title, .c-section .c-section__product-list li, .c-footer .c-footer__top-footer .c-footer__logo, .c-footer .c-footer__top-footer .c-footer__links, .c-footer .c-footer__top-footer .c-footer__section-form, .c-footer .c-footer__bottom-footer',
 {
interval: 100,
 },
)

Com isso já temos a nossa página de e-commerce com a biblioteca de ScrollReveal pronta e funcional para a nossa página inicial, podemos adicionar nas demais apenas linkando o arquivo javascript e adicionando as classes das tags de outras páginas na lista de classes. Um abraço e até a próxima.

Artigo Original: https://francileudo-frontend.blogspot.com/2022/10/animacao-de-rolagem-de-pagina-usando.html