Rolagem com precisão, inércia, cálculo de posição, desenho na tela e sequências que podem ser revertidas. Tudo em JavaScript puro, sem nenhuma biblioteca para instalar.
O CSS consegue disparar algo quando um elemento aparece, mas não sabe dizer quanto dele já apareceu. Essa medida contínua é a especialidade do JavaScript. Aqui a rolagem deixa de ser só um gatilho e vira o controle: você avança, o efeito avança; você volta, ele volta. Cada quadro tem rolagem própria, então basta um gesto dentro dele.
Cada cartão gruda no topo e o seguinte sobe por cima. Os de baixo encolhem e escurecem, como uma pilha de verdade. É o efeito de rolagem mais copiado dos últimos dois anos.
Você rola para baixo e o conteúdo anda para o lado. O painel fica preso enquanto a fita percorre toda a largura, e é assim que sites de agência mostram portfólio.
A rolagem vira a linha do tempo de uma animação desenhada na tela. É a técnica das páginas de produto da Apple: girar o objeto depende de quanto você rolou, e não do relógio.
As palavras ganham cor conforme a rolagem passa por elas, com uma zona de degradê de três palavras em vez de acender de uma vez. O JavaScript quebra a frase sozinho.
Cortar silêncio na mão é o trabalho mais caro do seu dia, e ninguém elogia quando fica bom.
Um buraco redondo cresce no meio da cena e descobre a de baixo. Serve para mostrar antes e depois, ou para trocar de assunto sem trocar de página.
A imagem chega dividida em tiras que deslizam em direções alternadas até se encaixarem. Cada tira tem um atraso, o que dá o efeito de abertura de campanha.
O traço cresce conforme a rolagem e cada marco acende quando a linha chega nele. Vira o esqueleto de qualquer história contada em página.
A rolagem controla a rotação de um objeto de quatro faces. Cada trecho de tela mostra um lado diferente, o que é a forma mais direta de apresentar um produto.
Aqui o movimento não tem destino marcado: ele é calculado a cada quadro a partir de onde o mouse está, de quanta velocidade sobrou e de quanto atrito existe. É o que dá peso às coisas.
O ponto acompanha na hora e o anel chega depois. Essa diferença de atraso entre os dois é o que dá a sensação de peso, e sai de uma linha de matemática.
O conteúdo persegue a posição da rolagem em vez de saltar para ela. É o efeito de site de agência, e a única diferença é um número: o quanto ele se aproxima por quadro.
Segue o dedo e continua andando quando você solta, perdendo velocidade aos poucos. O atrito é uma multiplicação por 0,93 a cada quadro.
O JavaScript só escreve a posição do mouse em duas variáveis. O brilho em si é um gradiente do CSS que lê essas variáveis, então o custo é quase zero.
Cada ponto tem um lugar de origem, é empurrado quando o mouse chega perto e volta devagar para casa. Duas forças opostas e o resultado parece vivo.
Mola de verdade, com velocidade e amortecimento calculados a cada quadro, em vez de uma curva pronta. Ele oscila e assenta sozinho, como um objeto real.
O CSS anima o texto inteiro como um bloco. Para tratar letra por letra, palavra por palavra ou dígito por dígito, alguém precisa quebrar o conteúdo antes, e esse alguém é o JavaScript.
As letras giram como painel de aeroporto e vão travando da esquerda para a direita. Combina com tecnologia, contagem e revelação de nome.
O JavaScript quebra a frase e cada palavra entra com um atraso. Fazer isso na mão significaria escrever cada palavra dentro de uma tag separada.
Todo o silêncio do seu vídeo, cortado em segundos.
A lista sobe dentro de uma janela da altura de uma linha e volta ao começo sem que ninguém perceba o pulo. Resolve o título que precisa dizer três coisas.
Cada dígito é uma fita de zero a nove que desliza até parar no número certo, um depois do outro. É o contador dos painéis de estatística.
Conta o tempo que falta e se corrige a cada segundo. A regra de ouro é calcular sempre a partir da data final, nunca subtraindo de um em um.
Quando um item muda de lugar, o navegador simplesmente o desenha na posição nova. Fazer ele deslizar até lá exige medir antes, medir depois e animar a diferença. Essa técnica tem nome: FLIP.
Mede onde cada item estava, muda a ordem, mede onde ficou e anima a diferença. Sem isso os itens saltariam de posição sem transição nenhuma.
Mesmo FLIP do efeito anterior, aplicado ao esconder e mostrar: os itens que ficam deslizam suavemente para as vagas que abriram.
A janela abre a partir do tamanho e da posição exatos do item clicado, então o olho não perde o objeto de vista. É o que faz um site parecer aplicativo.
Um painel abre e os outros cedem espaço. O JavaScript só troca a classe: a divisão do espaço é o CSS quem resolve, o que mantém tudo fluido.
Um marcador invisível no fim da lista avisa quando fica visível, e aí novos itens entram. Substitui o botão de próxima página.
Gráfico animado não é enfeite: o movimento mostra a construção do número e prende o olho no dado. Todos os três aqui saem de uma lista de valores, então funcionam com dados de verdade.
As barras sobem até a altura proporcional ao valor e o número conta junto. O gráfico inteiro é montado a partir de uma lista de dados.
O círculo é um traço tracejado do tamanho da própria volta, e o vazio vai sendo puxado até completar a porcentagem. Mesmo truque do traço que se desenha.
O caminho é calculado a partir dos números, se desenha da esquerda para a direita, e cada ponto aparece depois que a linha chega nele.
Os dois primeiros desenham pixel a pixel numa tela em branco, coisa que HTML e CSS não fazem. O último é o efeito que mais aproxima um site de um aplicativo, e é novidade recente nos navegadores.
Pontos flutuam e ganham uma linha entre si quando estão perto o bastante. É o clássico dos fundos de site de tecnologia, e cabe em vinte linhas.
Cada papel tem gravidade, giro e resistência do ar. Quando todos saem da tela, o laço para sozinho e não consome mais nada.
O navegador fotografa o antes e o depois e faz a passagem sozinho. Onde o recurso ainda não existe, a troca acontece direto, sem quebrar nada.
Aqui não existe elemento nenhum na página: o navegador entrega um retângulo em branco e o código pinta cada ponto. É a faixa que costuma aparecer só em biblioteca paga, e a que mais impressiona em vídeo. Um deles fala direto com a placa de vídeo, os outros cinco usam a tela comum. Todos param sozinhos quando saem de vista, senão a bateria de quem visita paga a conta.
O desenho não é feito pelo processador, e sim pela placa de vídeo: um programinha calcula a cor de todos os pixels ao mesmo tempo. É o que permite um fundo fluido em tela cheia sem travar nada. Passe o mouse para iluminar.
A palavra é escrita numa tela invisível, os pixels dela viram pontos e cada ponto ganha vida própria. Fogem do mouse e voltam sozinhos para o lugar, puxados por uma mola.
Em vez de limpar a tela a cada quadro, ela é escurecida de leve. O que ficou para trás vai sumindo aos poucos, e é isso que vira rastro. Duas linhas de código, efeito de site premiado.
Uma grade de linhas com altura calculada por seno, desenhada em perspectiva. Parece 3D, mas é matemática de escola, e o mouse levanta a malha por onde passa.
Cada estrela tem uma profundidade que diminui a cada quadro. Dividir a posição por ela cria a perspectiva, e com ela a sensação de velocidade. Segure o clique para acelerar.
Os círculos são comuns e nem se tocam de verdade. Quem funde um no outro é um desfoque somado a muito contraste, aplicado por cima pelo CSS. O truque tem nome: metaball.
Os trinta e seis efeitos desta página estão em source/animacoes-js.js, comentados um a um, com o CSS de apoio em source/animacoes-js.css. Nenhum deles repete a coleção de CSS: todos fazem algo que o CSS sozinho não alcança. Os efeitos que desenham na tela só rodam enquanto estão visíveis, para não consumir bateria à toa, e o motor da vitrine é o mesmo das duas páginas.