Menu que Vira Cápsula Plus

Sobre este efeito

Um menu que muda de forma com a rolagem. No topo da página, ele é uma barra larga e transparente por cima da foto de abertura. Quando a pessoa começa a rolar, o fundo nasce como uma linha fina no alto e desce até fechar, enquanto a barra encolhe até a largura do próprio conteúdo e vira uma cápsula flutuante, com sombra. O logo, os links e o botão trocam de cor junto, e itens marcados somem no caminho, como o subtítulo do logo. Voltando ao topo, tudo se desfaz; se a pessoa inverter no meio, a barra volta de onde está, sem pular. Dá pra ligar o fundo de vidro fosco, uma linha na base da cápsula que mostra quanto da página já foi lida, e esconder a cápsula ao descer, com ela voltando ao subir e ao receber foco do teclado. Funciona na página ou num bloco que rola. Com a preferência de menos movimento, troca de estado sem animação. Cores, distância da borda, quanto rolar até recolher, duração e arredondado ajustáveis. JavaScript e CSS puros, sem biblioteca.

Ficha

Categoria

Menu

Onde combina

menu/navegação, topo (hero)

Alcance

Página inteira: depende da rolagem ou do cursor da página toda.

Plano

Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).

Na loja desde

03/11/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-que-vira-capsula.

Assuntos

• menu
• navegação
• cabeçalho
• header
• barra
• cápsula
• pílula
• rolagem
• scroll
• fixo
• flutuante
• vidro