Texto em movimento

18 efeitos de texto · 1 atributo · 0 dependências

Galeria

Dezoito efeitos,
um atributo.

Role a página: cada efeito dispara ao entrar na tela. Use Repetir para ver de novo.

01revelar

Letras que sobem da sombra

<h3 data-tc="revelar" data-passo="30">
02decodificar

Sinal recebido. A mensagem se resolve letra por letra.

<p data-tc="decodificar" data-duracao="1.8">
03digitar

Eu crio

<span data-tc="digitar" data-frases="uma|duas|três">
04varredura

Uma faixa de luz atravessa cada palavra

<h3 data-tc="varredura"> — background-clip: text
05onda

ondas de tipografia

<p data-tc="onda"> — loop contínuo
06desfocar

Cada palavra chega do desfoque, uma de cada vez, até a frase ficar nítida.

<p data-tc="desfocar" data-passo="120">
07contador

letras animadas desde que você abriu a página*

ticket médio
satisfação
<span data-tc="contador" data-valor="1284750" data-decimais="0">
08destaque

Escreva o que importa e deixe a ideia saltar da página com um traço de marca-texto.

<p data-tc="destaque"> … <mark>trecho</mark> … <mark data-cor="tomate">
09cair

Letras que despencam e quicam

<h3 data-tc="cair" data-passo="45">
10girar

Cada letra vira em três dimensões antes de pousar.

<p data-tc="girar"> — rotateX + perspective
11glitch

SINAL CORROMPIDO

<h3 data-tc="glitch"> — cópias RGB em fatias
12neon

aberto até tarde

<p data-tc="neon"> — pisca e acende
13fatiar

Cortado em três fatias

<h3 data-tc="fatiar" data-fatias="3">
14trocar

Feito para ser

<span data-tc="trocar" data-palavras="um|dois|três" data-pausa="1700">
15contorno

Traço que vira tinta

<h3 data-tc="contorno" data-passo="40">
16gradiente

cores em fluxo

<p data-tc="gradiente"> — loop contínuo
17espalhar

Do caos para o lugar certo

<h3 data-tc="espalhar" data-passo="28">
18riscar

Design não é enfeiteestratégia. Movimento não é firulaclareza.

<p data-tc="riscar"> … <s>antes</s><ins>depois</ins> …

Como usar

Três passos,
nenhum build.

  1. Copie estilo.css e script.js para o seu projeto.
  2. Marque o texto com data-tc="efeito".
  3. Pronto: o script inicia sozinho. Para controlar, use TextosCineticos.iniciar().
<!-- 1. estilos e script -->
<link rel="stylesheet" href="estilo.css">
<script src="script.js" defer></script>

<!-- 2. qualquer elemento de texto -->
<h2 data-tc="revelar">Seu título</h2>

<p data-tc="decodificar" data-duracao="1.5">
  Mensagem secreta
</p>

<span data-tc="digitar"
      data-frases="um|dois|três"></span>

<span data-tc="contador" data-valor="1284750"></span>

<!-- 3. opcional: controle manual -->
// <body data-tc-manual>
TextosCineticos.iniciar();
TextosCineticos.repetir(elemento);