Este site não permite ser exibido dentro de outra página. Abra em uma aba nova para ver o preview.
Abrir PinstackPinstack — catálogo de componentes de interface prontos, bom para resolver padrões estruturais.
Rolagem medida quadro a quadro, física com atrito e mola, desenho direto na tela e texto quebrado letra por letra. Tudo em JavaScript puro — copie o código de qualquer quadro e leve para o seu projeto.
Duas bibliotecas para garimpar direção de movimento e componentes antes de desenhar qualquer coisa. Os previews carregam ao vivo quando o site permite ser embutido.
Este site não permite ser exibido dentro de outra página. Abra em uma aba nova para ver o preview.
Abrir PinstackEste site não permite ser exibido dentro de outra página. Abra em uma aba nova para ver o preview.
Abrir Motion SitesEste site não permite ser exibido dentro de outra página. Abra em uma aba nova para ver o preview.
Abrir Refero StylesO CSS sabe avisar que um elemento entrou na tela. Não sabe dizer quanto dele já entrou. Essa medida contínua é o território do JavaScript: você avança e o efeito avança, você volta e ele volta. Cada quadro tem rolagem própria — role dentro dele.
Cada cartão trava no topo e o próximo sobe por cima. Os de baixo encolhem e escurecem, como papel empilhado de verdade.
O arquivo entra uma vez e nunca mais é lido do zero.
Você mexe no limite e o resultado muda na hora.
A prévia mostra apenas o que sobrou.
Com cópia de segurança do original guardada antes.
Você rola para baixo e o conteúdo caminha na horizontal. O painel fica preso enquanto a fita percorre toda a largura.
A rolagem vira a linha do tempo de uma animação desenhada na tela. Girar o objeto depende de quanto você rolou, não do relógio.
As palavras ganham cor conforme a rolagem passa por elas, com uma zona de transição de três palavras. O JavaScript quebra a frase sozinho.
Um furo redondo cresce no meio da cena e descobre a camada de baixo. Serve para 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 próprio.
O traço cresce junto com 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 mostra um lado diferente — 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 ponteiro está, de quanta velocidade sobrou e de quanto atrito existe. É o que dá peso às coisas.
O ponto acompanha na hora, o anel chega depois. Essa diferença de atraso entre os dois é toda 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 até ela. A única diferença para o normal é 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 ponteiro em duas variáveis. O brilho é um gradiente do CSS que lê essas variáveis — o custo é quase zero.
Cada ponto tem um lugar de origem, é empurrado quando o ponteiro chega perto e volta devagar para casa. Duas forças opostas, e o resultado parece vivo.
Mola de verdade, com velocidade e amortecimento recalculados a cada quadro, em vez de uma curva pronta. Ele oscila e assenta sozinho.
O CSS anima o texto inteiro como um bloco só. 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 próprio. Fazer isso na mão significaria escrever cada palavra dentro de uma tag separada.
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. Diferente do contador simples: aqui os dígitos rolam.
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 redesenha na posição nova, sem transição nenhuma. Fazer ele deslizar até lá exige medir antes, medir depois e animar a diferença. A técnica tem nome: FLIP.
Mede onde cada item estava, troca a ordem, mede onde ficou e anima a diferença. Sem isso, os itens saltariam de posição.
O mesmo FLIP aplicado a 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 encolhem. O JavaScript só troca a classe — a divisão do espaço quem resolve é o CSS, 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 segura o olho no dado. 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.
O círculo é um traço tracejado do tamanho da própria volta, e o vazio vai sendo puxado até completar a porcentagem.
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.
Aqui não existe elemento nenhum: o navegador entrega um retângulo em branco e o código pinta cada ponto. Todos param sozinhos quando saem de vista — senão a bateria de quem visita paga a conta.
Pontos flutuam e ganham uma linha entre si quando chegam perto o bastante. Clássico de fundo 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.
Em vez de limpar a tela a cada quadro, ela é clareada de leve. O que ficou para trás vai sumindo aos poucos — e é isso que vira rastro.
Uma grade de linhas com altura calculada por seno, desenhada em perspectiva. Parece 3D, mas é matemática de escola.
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.
Um fala direto com a placa de vídeo, outro monta a palavra a partir de pixels e o último usa um recurso novo do navegador para trocar de tela sem trocar de página. É a faixa que costuma aparecer só em biblioteca paga.
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. Fundo fluido em tela cheia sem travar nada.
A palavra é escrita numa tela invisível, os pixels dela viram pontos e cada ponto ganha vida própria. Fogem do ponteiro e voltam puxados por uma mola.
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.
Coloque seu e-mail para adquirir o ebook!