Lista que Acende Ultra

Sobre este efeito

Lista de serviços, cursos ou projetos em letras grandes e apagadas, com um painel de foto ao lado. No item com o mouse, com o foco do teclado ou tocado, cada letra rola (a cópia apagada sobe e sai, a cheia sobe de baixo, uma depois da outra) e a foto daquele item abre no painel de cima pra baixo por cima da anterior, assentando de um zoom leve. O último item fica aceso quando o mouse sai. A foto antiga fica inteira embaixo até a nova cobrir. O leitor de tela lê cada item uma vez, os itens têm foco e setas, no celular o 1º toque acende e o 2º segue o link, palavra longa encurta o atraso entre letras, troca rápida continua de onde parou, a preferência de menos movimento só esmaece, e tudo é transição de CSS. Tempos, opacidade apagada, zoom e tamanho do painel ajustáveis. Sem biblioteca.

Ficha

Categoria

Interação

Onde combina

recursos, menu/navegação

Alcance

Área: vive dentro de um bloco da página.

Plano

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Peso

6,2 KB de código comprimido. Sem biblioteca externa.

No celular

Leve: usa 10% do processador de um celular intermediário enquanto anima.

Na loja desde

15/09/2026

Como colocar no seu site

1. Criando o site com IA (Claude Code, Codex e parecidas): baixe o kit, extraia na pasta do projeto e cole o pedido pronto que a loja entrega. Não precisa saber programar.
2. Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
3. Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-lista-que-acende.

Assuntos

• lista
• hover
• texto
• letras
• foto
• clip-path
• servicos
• menu
• css
• js