Há algum tempo vinha pesquisando uma maneira de implementar animações em CSS ativadas durante o scroll da página no site usando JavaScript. A ideia foi usar animações simples, seguindo a linha minimalista.
Uma das alternativas era utilizar bibliotecas de animação. No entanto, não fazia sentido sacrificar o tempo de carregamento da página com os arquivos da biblioteca para animações simples.
Encontrei no IntersectionObserver uma alternativa em poucas linhas de código e ainda mais eficiente do que usar um EventListener. Ela é usada principalmente na homepage do site.
A API Intersection Observer fornece uma maneira de observar as alterações de forma assíncrona na interseção de um elemento de destino com um elemento pai ou o viewport da página.
Ou seja, ao invés de observar a rolagem da página, o recurso pode ser usado para observar se algo está atualmente visível na página. A implantação é simples:
function scrollTrigger(selector, animation, options = { threshold: 0.1 }){
let els = document.querySelectorAll(selector);
els = Array.from(els);
els.forEach(el => {
addObserver(el, animation, options);
})
}
function addObserver(el, animation, options){
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if(entry.isIntersecting){
entry.target.removeAttribute('style');
entry.target.classList.add(animation);
observer.unobserve(entry.target);
} else if (!entry.isVisible) {
entry.target.style.opacity = '0';
}
})
}, options);
observer.observe(el);
}Entendendo o código JavaScript
A scrollTrigger é a função que chamaremos para cada animação ativada por scroll. Ela recebe como parâmetro as variáveis:
- selector: os seletores CSS que serão animados. Pode ser um seletor ou vários, separados por vírgulas.
- animation: a classe CSS com a animação a ser aplicada.
- options: opções da API IntersectionObserver. Neste caso, queremos que a animação seja aplicada quando 10% do elemento for visível na página. Veja as opções na documentação disponível no MDN.
A função busca pelo seletor CSS e coloca os resultados em um array, e para cada elemento encontrado chama a função addObserver, que criará o observador de interseção.
No exemplo acima, se o elemento a ser animado não estiver oculto pelo CSS e se não estiver ao menos 10% visível na página, ele terá o atributo style adicionado definindo a opacidade em 0%.
Quando o elemento entrar no viewport e pelo menos 10% do conteúdo for visível, a API IntersectionObserver remove o atributo style adicionado anteriormente, e adiciona a classe com a animação.
Após isso, como a intenção é ativar a animação apenas uma vez, o script remove o elemento do observador, para evitar que a animação seja ativada novamente.
