Lista com Foto Ultra

Lista de etapas em letras grandes: no hover as letras rolam pra cor de destaque em itálico e um cartão com a foto da linha surge e desliza de linha em linha.

Ver na loja e baixar

Sobre este efeito

Lista de etapas, serviços ou capítulos em letras grandes. Com o mouse numa linha, as letras rolam pra cima em cascata e a palavra volta em itálico na cor de destaque, a etiqueta da linha apaga e um cartão com a foto daquela linha aparece à direita, saindo de um giro leve, um pouco menor e em cinza. Um cartão só serve a lista inteira: ele desliza até a linha nova e troca a foto por dentro. Rola letra a letra em cascata (ou a palavra inteira, se preferir), funciona pelo teclado, no celular o primeiro toque mostra a foto e o segundo segue o link, e o leitor de tela lê cada palavra uma vez. Cor, estilo, duração, cascata, giro, largura do cartão e película ajustáveis. a preferência de menos movimento troca sem rolar nem girar. 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: 5,1 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 7% do processador de um celular intermediário enquanto anima.
Na loja desde: 14/09/2026

Como colocar no seu site

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.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-lista-com-foto.

Assuntos

interacao
lista
hover
foto
imagem
etapas
processo
servicos
tipografia
rolagem
css
js