Barras que Escorrem Plus

Sobre este efeito

Camada de abertura e de troca de página. Barras de cor escorrem de cima como tinta, cada uma largando num tempo e descendo num ritmo, até cobrir a tela inteira; depois continuam descendo e saem pelo pé, revelando a página por baixo, com a borda da tinta chegando desigual como tinta de verdade. Na abertura, a página já nasce coberta e as barras escorrem pra fora assim que ela termina de carregar. Num link marcado, a tela é coberta antes de navegar e a próxima página abre escorrendo, com o nome do destino no meio da capa. Por código, cobre, deixa trocar o conteúdo por baixo e revela, pra abas e passos sem sair da página. A página nunca fica presa atrás da capa: sem o script, a capa some sozinha; com página lenta, as barras saem no tempo máximo; voltando pelo botão Voltar, a página aparece descoberta. Enquanto cobre, segura o clique; o teclado e o leitor de tela nunca ficam presos. Fora das trocas nada roda, e a descida fica no compositor do navegador. Com a preferência de menos movimento, a capa só esmaece. Seis cores, largura das barras, tempos de descida e de saída, diferença de largada, variação, tempo coberta, direção (desce ou sobe), brilho na ponta e rótulo ajustáveis. CSS e JS puros, sem biblioteca.

Ficha

Categoria

Carregamento

Onde combina

utilitário, transições, 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).

Peso

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

No celular

Mais pesado: usa 63% do processador de um celular intermediário enquanto anima.

Na loja desde

25/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-barras-que-escorrem.

Assuntos

• preloader
• loader
• carregamento
• abertura
• transição
• troca-de-página
• tinta
• escorrer
• barras
• cores
• revelar-pagina
• css