Praticando JavaScript e CSS: animações de scroll em uma página web

Animações com IntersectionObserver - Apresentação

Introdução ao Curso

Olá! Boas-vindas a mais este curso de JavaScript e CSS. Meu nome é Antônio Avaldo, e serei o instrutor deste curso.

Audiodescrição: Antônio é um homem branco, usa óculos com armação arredondada, tem bigode e cavanhaque, e possui cabelos escuros, volumosos e cacheados na altura dos ombros. Ele veste uma camisa colorida e, ao fundo, há uma parede iluminada pelas cores azul e rosa.

Projetos do Curso

Neste curso, vamos explorar um projeto da Alura, o Calmari Spa. Ao atualizar o projeto, podemos observar as transições implementadas. O primeiro elemento aparece na tela com uma transição suave. À medida que descemos a página, as próximas sessões do site surgem suavemente, refletindo a atmosfera do site. Mais abaixo, encontramos alguns cartões que aparecem lentamente, destacando os serviços do Calmari Spa.

Além disso, vamos explorar outro projeto, o Culturama. Ao atualizar a página, notamos animações mais dinâmicas para as imagens coloridas. Conforme descemos, os cartões de categorias aparecem ao lado, apresentando uma animação mais sofisticada, na qual o cartão desacelera e se reposiciona.

Estrutura e Conteúdo do Curso

Olá! Neste curso, vamos explorar como a animação é refeita conforme subimos novamente na página. Esses comportamentos diferentes serão abordados ao longo das aulas. O curso possui um formato um pouco diferente, começando com a demonstração de como realizar essas ações em um projeto básico.

Nós disponibilizamos dois projetos para que você possa praticar os conhecimentos adquiridos de forma independente. Aproveite, pois há bastante prática envolvida. Cada projeto foi dividido em vários desafios sequenciais, permitindo que você os complete de forma incremental. O conteúdo é valioso e está incrível!

Técnicas e Pré-requisitos

Com esses projetos, aprenderemos a realizar a detecção de scroll (rolagem) utilizando o Intersection Observer, uma API nativa do JavaScript. Além disso, implementaremos transições e animações em CSS. Haverá muita prática, e disponibilizaremos gabaritos para auxiliar caso surjam dificuldades durante as atividades.

Para acompanhar o curso, é importante ter familiaridade com HTML, CSS e JavaScript. No CSS, é desejável possuir uma base em transições e animações. No entanto, se isso não for o caso, não se preocupe. Disponibilizaremos uma atividade com referência a um artigo da Alura que aborda exatamente esse assunto, contendo todas as informações necessárias para acompanhar o curso.

Conclusão

Vamos começar?

Animações com IntersectionObserver - Conhecendo o IntersectionObserver

Introdução ao Projeto de Animações

Para que possamos criar animações incríveis nos projetos que serão apresentados, começaremos com um projeto base bem simples. Estamos visualizando-o agora no navegador. Também disponibilizamos uma atividade para baixar este projeto. Primeiramente, vamos mostrar a versão final dele, para onde queremos chegar. Ao atualizar a página, a primeira seção aparece desembaçando, inicialmente invisível, e se posiciona no centro da tela. Ao descer um pouco mais, a segunda seção faz o mesmo movimento, enquanto a seção 1 desaparece. Ao descer mais um pouco, as seções 3 e 4 aparecem lado a lado, de forma separada. Vamos demonstrar como fazer tudo isso.

Preparação do Ambiente de Desenvolvimento

Agora, vamos fechar essa aba do navegador e abrir uma versão do projeto sem as animações, completamente estático, apenas com HTML e CSS. Vamos aprender como criar essas animações. No VSCode, abriremos o código, utilizando a extensão Live Server para visualizar atualizações em tempo real. Caso ainda não tenha, é possível pesquisar e instalar essa extensão na aba de extensões do VSCode. Ela já está em execução no navegador.

Estrutura HTML e CSS

No HTML, temos uma tag head, uma tag body, um h1 com o título "scroll com animações", e a estrutura das sections. Todas possuem um h2 com o número da seção e um parágrafo com texto em latim. As seções 3 e 4 estão dentro de uma div com a classe "Sessões Juntas", que as posiciona lado a lado. O arquivo style.css contém todo o código CSS, incluindo o display flex, que pode ser explorado com mais calma.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<body>
    <h1>Scroll com animações!</h1>

    <section>
        <h2>Seção 1</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, harum.
            Placeat, beatae harum cum omnis iusto ea nulla rerum ipsam
            voluptatem nihil enim culpa accusamus facere officiis pariatur. In, nemo!
        </p>
    </section>

    <section>
        <h2>Seção 2</h2>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, harum.
            Placeat, beatae harum cum omnis iusto ea nulla rerum ipsam
            voluptatem nihil enim culpa accusamus facere officiis pariatur. In, nemo!
        </p>
    </section>

    <div class="secoes-juntas">
        <section>
            <h2>Seção 3</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, harum.
                Placeat, beatae harum cum omnis iusto ea nulla rerum ipsam
                voluptatem nihil enim culpa accusamus facere officiis pariatur. In, nemo!
            </p>
        </section>
        <section>
            <h2>Seção 4</h2>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, harum.
                Placeat, beatae harum cum omnis iusto ea nulla rerum ipsam
                voluptatem nihil enim culpa accusamus facere officiis pariatur. In, nemo!
            </p>
        </section>
    </div>

    <script src="main.js"></script>
</body>

Implementação das Animações com JavaScript

No arquivo main.js, que está referenciado pelo HTML, é onde trabalharemos para criar as animações de acordo com a rolagem da tela. Existem várias formas de fazer isso, e deixaremos uma atividade explicando formas alternativas. A abordagem que utilizaremos agora envolve escutar o evento de scroll e verificar a posição dos elementos. Existem métodos que utilizam funções do CSS, mas que ainda são experimentais. Vamos utilizar uma API nativa do JavaScript, que é mais performática.

Utilizando o IntersectionObserver

No arquivo main.js, escreveremos const observador = new IntersectionObserver. Esta é uma classe do JavaScript, a API que utilizaremos para atingir nosso objetivo. O nome dessa classe é "observador de interseção". Não é necessário entender profundamente sobre classes, apenas como utilizá-las e passar funções para elas. Inicializaremos o construtor com uma arrow function, incluindo um parâmetro chamado entradas. Para entender o que são essas entradas, faremos um console.log nelas.

const observador = new IntersectionObserver((entradas) => {
    console.log(entradas);
});

Para ver o observador em ação, precisamos observar algum elemento no HTML. No HTML, na linha 24, adicionaremos uma classe na section chamada "animar".

<section class="animar">

Voltando ao main.js, escreveremos const elemento = document.querySelector('.animar') para buscar a section pela classe "animar". Em seguida, utilizaremos observador.observe(elemento) para observar o elemento.

const elemento = document.querySelector('.animar');
observador.observe(elemento);

Funcionamento do IntersectionObserver

O IntersectionObserver funciona da seguinte forma: assim que o elemento observado entra na tela, o código da função callback é executado. Mesmo antes de entrar na tela, esperamos que essa função seja executada pelo menos uma vez. Vamos verificar isso no navegador, abrindo o DevTools e a aba console. Ao atualizar a página, veremos um array com uma única posição, do tipo IntersectionObserverEntry. Prestaremos atenção em duas propriedades: isIntersecting, que indica se a seção está na tela, e target, que faz referência ao elemento do DOM.

Adicionando Animações com CSS

Vamos voltar para o VS Code e abrir o arquivo style.css. Vamos pegar um código CSS de referência e entender como ele funciona. Ao colar o código, ajustamos os espaços. Este código adiciona estilos para as seções que possuem a classe Animar. A classe Animar define uma opacidade de 0, transforma a posição em 200 pixels para a direita, aplica um filtro de desfoque de 10 pixels e uma transição de 1 segundo. A propriedade de transição é a chave aqui. Quando a seção com a classe Animar recebe a classe AnimarVisível, todos esses valores são transicionados: a opacidade de 0 para 1, a movimentação de 200 pixels para a posição original e o filtro de 10 pixels para 0.

section.animar {
    opacity: 0;
    transform: translateX(200px);
    filter: blur(10px);

    transition: all 1s;
}

section.animar-visivel {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
}

Aplicando Animações a Múltiplos Elementos

Queremos aplicar isso a todas as seções ao mesmo tempo. No VS Code, no index.html, copiamos a classe Animar e colamos na primeira, terceira e quarta seções. Salvamos o arquivo e adaptamos o código JavaScript, que inicialmente capturava apenas um elemento com querySelector. Agora, utilizamos querySelectorAll para capturar todos os elementos com a classe Animar. Renomeamos a constante para elementos e, para cada elemento, passamos uma função callback que observa todos ao mesmo tempo.

const elementos = document.querySelectorAll('.animar');

elementos.forEach((elemento) => {
    observador.observe(elemento);
})

Personalizando o Comportamento das Animações

Podemos personalizar esse comportamento. No new IntersectionObserver, passamos um segundo parâmetro, um objeto com opções. Exploramos a opção threshold, que define um limite. Com threshold em 1, a função callback é executada apenas quando 100% do elemento está visível. Ao salvar e atualizar, notamos que a seção 1 só aparece quando totalmente visível. Alteramos o threshold para 0.3 (30%) e, ao descer, a seção 2 é animada quando 30% está visível, permitindo uma melhor visualização da transição.

const observador = new IntersectionObserver((entradas) => {
    entradas.forEach((entrada) => {
        if (entrada.isIntersecting){
            entrada.target.classList.add('animar-visivel');
        } else {
            entrada.target.classList.remove('animar-visivel');
        }
    })
}, {
    threshold: 0.3
});

Melhorando as Animações com CSS

Para melhorar a animação dos cards lado a lado, podemos atrasar a transição de um deles usando CSS. No style.css, aplicamos um transition-delay de 300 milissegundos à segunda seção filha da div com a classe seções juntas. Isso faz com que a transição demore um pouco mais, criando um efeito interessante. Após salvar e testar, notamos que a seção 4 demora um pouco mais para aparecer, proporcionando um efeito sofisticado.

.secoes-juntas section:nth-of-type(2) {
    transition-delay: 300ms;
}

Conclusão e Prática

Esses conceitos podem ser praticados em dois projetos que serão disponibilizados nas atividades. A prática é essencial para internalizar tanto o JavaScript quanto o CSS. Em caso de dúvidas, o fórum e a comunidade da Alura estão disponíveis para consulta.

Sobre o curso Praticando JavaScript e CSS: animações de scroll em uma página web

O curso Praticando JavaScript e CSS: animações de scroll em uma página web possui 24 minutos de vídeos, em um total de 14 atividades. Gostou? Conheça nossos outros cursos de JavaScript em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Animações com IntersectionObserver