Como ativar animações durante o scroll com JavaScript sem bibliotecas

Matheus Misumoto — Wed, 31 May 2023 12:30:00 +0000

Há algum tempo vinha pesquisando uma maneira de executar animações em CSS ativadas durante o scroll da página no meu site usando JavaScript. A ideia foi usar animações simples.

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 na API IntersectionObserver uma alternativa em poucas linhas de código. Ela 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.

Como eu uso o Google Cloud para hospedar meu portfolio de graça

Matheus Misumoto — Fri, 05 May 2023 14:30:00 +0000

Há mais de um ano venho usando o Google Cloud para hospedar este meu site de graça. Desde então, além da melhoria de desempenho, pude aprender mais sobre o uso dos serviços em nuvem.

Isso me deu liberdade para adicionar funcionalidades que meu antigo provedor pago de hospedagem de sites não fornecia: otimização de imagens, atualizações para versões mais recentes do PHP e algoritmos de compactação, por exemplo.

Além disso, claro, me poupou bastante dinheiro com serviço de hospedagem. Hoje só gasto com a renovação anual do domínio do site.

Desde então expandi o uso para outros serviços gratuitos com o conhecimento adquirido no curso de fundamentos do Google Cloud.

Como tudo funciona

Primeiramente, as requisições ao domínio do site levam a um IP externo Premium, em que o tráfego é roteado o máximo possível dentro da rede do Google. Após passar por regras de firewall, a requisição chega a uma máquina virtual do Compute Engine, com armazenamento e processamento dentro da categoria gratuita do Google Cloud.

A VM tem instalado um servidor Nginx, com suporte a PHP, e um servidor de banco de dados relacional MariaDB. Com isso é possível rodar o WordPress, bem como outros projetos que necessitem ou não de banco de dados.

Em alguns casos, projetos podem ser aplicações rodando em containers e que utilizam linguagens compiladas como Java. Neste caso, elas utilizam os limites gratuitos do Cloud Run, um serviço sem servidor para executar containers na nuvem.

Passei a usar esse serviço após o Heroku extinguir o plano gratuito, e fiz o deploy dos projetos no Google Cloud utilizando o Cloud Run.

Backups, monitoramento e atualizações

Com grandes poderes vêm grandes responsabilidades
Tio Ben

A possibilidade de ter um servidor configurado à sua maneira em serviços de nuvem traz, no entanto, a “desvantagem” de ter que assumir as tarefas de manutenção e disponibilidade do seu site e/ou da sua aplicação.

Na verdade, não se trata de uma desvantagem. Além de aprender e aplicar novos conhecimentos, o Google Cloud facilita bastante o trabalho, e de graça.

Os logs de acessos e possíveis mensagens de erros do servidor, além de serem temporariamente hospedados na máquina virtual, são enviados ao serviço Cloud Logging. Ali podem ser buscados e filtrados para monitoramento de possíveis anormalidades.

Além disso, há rotinas de backups com snapshots e atualização do servidor via gerenciamento de correções de SO. Todos eles programados para acontecer periodicamente de maneira automática.

DEV Community: Matheus Misumoto

Como ativar animações durante o scroll com JavaScript sem bibliotecas

Entendendo o código JavaScript

Como eu uso o Google Cloud para hospedar meu portfolio de graça

Como tudo funciona

Backups, monitoramento e atualizações