SWCore / Animações
Animações
Recursos de movimento, narrativa, scroll e interação aplicados pela própria biblioteca nesta página.
Animação
84 - Efeitos de entrada
Uma frase no atributo decide a animação: sw-ani="efeito [quando] [velocidade] [atraso]" — por exemplo sw-ani="fade-up one slow delay-2".
85 - Texto animado
Título que entra letra a letra, máquina de escrever, texto que embaralha até formar, frase que acende ao rolar, faixa que corre sem parar — tudo com sw-ani.
86 - Mini-componentes animados
Três peças prontas com animação própria: o cartão que vira ao passar o mouse, a barra que se enche quando aparece e o desenho que se traça sozinho.
87 - Cascade
Vários itens entrando um depois do outro — cartões, fotos, itens de lista — com um só atributo no bloco de fora.
88 - Pin (prende na tela)
A seção fica grudada na tela enquanto a pessoa continua rolando — e, presa ali, as peças de dentro podem se mexer junto com a rolagem.
89 - Hero em camadas (layers)
A abertura do site com profundidade de cinema: fundo, assunto, texto, frente e névoa andando cada um no seu ritmo quando a pessoa rola a página.
90 - Fundo que muda (drift)
O fundo da página vai mudando de cor, bem devagar, conforme cada seção entra na tela. A página parece um lugar só, e não uma pilha de blocos.
91 - Fixed (gruda no topo)
Um elemento que gruda no topo da tela enquanto o bloco dele passa — e vai embora junto quando o bloco acaba. Sem prender a página.
92 - Track (fileira horizontal)
A pessoa rola a página para baixo e uma fileira de cartões anda para o lado — o bloco fica preso na tela até a fileira passar inteira.
93 - Sections (tela cheia)
Site contado em telas: cada tela ocupa a janela inteira e, ao rolar, a próxima entra no lugar da anterior — com a transição que você escolher para cada uma.
94 - Frames (sprite no scroll)
Uma sequência de imagens que troca de quadro conforme a rolagem — o clássico "gire o produto 360°" — presa na tela enquanto os quadros passam.
95 - SVG Draw (traço)
O contorno de um desenho SVG se desenha sozinho, como se fosse feito à mão, quando aparece na tela —
sw-ani="svg-draw".
96 - Motion Path
Um ícone ou objeto anda por cima de uma linha desenhada por você — preso à rolagem ou sozinho. sw-ani="motion-path" + sw-ani-path.
97 - Tilt (3D no mouse)
O cartão se inclina em 3D seguindo o mouse, como se você estivesse segurando ele — sw-ani="tilt".
98 - Magnetic (ímã)
O botão é "puxado" na direção do mouse quando ele chega perto, como um ímã — sw-ani="magnetic".
99 - Glow (segue o mouse)
Brilho de neon no texto e uma luz que acompanha o mouse por dentro do bloco — sw-ani="glow".
100 - Cursor personalizado
Troca ou acompanha a setinha do mouse na página inteira: um ponto, um anel, a sua logo — com movimento liso ou elástico. sw-ani="cursor" no <body>.
101 - Canvas (fundo generativo)
Fundos animados desenhados por código — partículas, ondas, chuva, aurora, colmeia — sem nenhuma imagem ou vídeo. sw-ani="canvas".
102 - Lottie
Toca animações vetoriais feitas no After Effects ou baixadas do LottieFiles — ícone animado, "carregando", check de sucesso. sw-ani="lottie".
103 - Rive
Animações interativas feitas no Rive: o arquivo já sabe como reagir (parado, hover, clique) — o SWCore só coloca na página. sw-ani="rive" num <canvas>.
104 - Countdown
Contagem regressiva até uma data — "faltam 12d 04h 33m 10s" — atualizando a cada segundo. sw-ani="countdown".
105 - Counter
O número sobe do zero até o valor quando aparece na tela — o clássico "+15.000 clientes". sw-ani="counter".
106 - Transição de página
Tira o "piscar branco" entre uma página e outra: uma cortina cobre a tela, a próxima página carrega por trás e a cortina sai. sw-ani-page="wipe" no link.
