Lista Animada Plus

Lista rolável onde cada item aparece ao entrar na janela e some ao sair, com degradês nas bordas e navegação pelo teclado.

Ver na loja e baixar

Sobre este efeito

Lista rolável onde cada item aparece quando entra na janela (cresce e desbota pra dentro) e some quando sai. Degradês em cima e embaixo mostram que há mais; as setas do teclado movem o item ativo e o clique também ativa, com evento pra você reagir. Roteiro de cenas, lista de projetos, perguntas frequentes, seleção de planos. Altura, cores, canto, vão, tempo, escala e degradê ajustáveis. Sem biblioteca.

Ficha

Categoria: Interação
Onde combina: recursos, perguntas
Alcance: Área: vive dentro de um bloco da página.
Plano: Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).
Peso: 3,9 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 6% do processador de um celular intermediário enquanto anima.
Na loja desde: 05/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-animada.

Assuntos

lista
scroll
rolagem
entrada
teclado
seleção
degradê
fade
listbox
css-puro