Menu em Onda Plus

Sobre este efeito

Uma pilha de links em letra grande, do jeito dos menus de tela cheia. Com o mouse numa palavra, as letras dela sobem uma a uma a partir do ponto onde o cursor entrou e cópias na cor de troca chegam por baixo; a letra que sai se achata ao passar pela borda, como se desse a volta num tambor. As outras palavras apagam e a onda passa por elas: as vizinhas acendem de passagem e dão um pulinho, letra a letra, a partir do cursor, e as de duas linhas de distância menos. Saindo, a palavra destroca a partir de onde o cursor saiu. Acento e cedilha nunca ficam cortados. Teclado acende pelo foco, toque acende e apaga sozinho, e o leitor de tela lê a palavra inteira. Fonte, tamanho, cores, quanto as outras apagam, tempo, atraso por distância e força da onda ajustáveis. CSS e JavaScript puros, sem biblioteca.

Ficha

Categoria

Menu

Onde combina

menu/navegação

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

5,4 KB de código comprimido. Sem biblioteca externa.

No celular

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

Na loja desde

30/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-menu-em-onda.

Assuntos

• menu
• navegacao
• tela cheia
• fullscreen
• links
• texto
• letras
• hover
• onda
• stagger
• tipografia