Linha que se Desenha Plus

Sobre este efeito

Uma linha grossa, de ponta redonda, que se desenha com a rolagem. Com a página no topo ela não aparece; quando a pessoa começa a descer, ela entra pela borda da tela e vai se desenhando sempre na mesma velocidade, porque o comprimento desenhado acompanha a rolagem, com um atraso macio por cima. O traço desce em zigue-zague de curvas largas: diagonais de borda a borda que cruzam por trás das fotos e do texto da seção, virando um pouco fora da tela, e como ele desce por igual a ponta fica sempre à vista. O traço é gerado sozinho pro layout da seção e refeito quando ela muda de tamanho, no computador e no celular; se a página acaba antes, a linha acelera um pouco pra fechar no fim. Subindo a página, ela se apaga pelo mesmo caminho. Dá pra deixar só um rastro atrás da ponta, ligar um brilho na ponta ou usar o seu próprio desenho em SVG. Com a preferência de menos movimento, o traço aparece inteiro e parado. Cor, espessura, opacidade, altura da ponta na tela, largura do zigue-zague, rastro e suavidade ajustáveis. JavaScript, SVG e CSS puros, sem biblioteca.

Ficha

Categoria

Scroll

Onde combina

recursos, prova social, transições

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-linha-que-se-desenha.

Assuntos

• scroll
• rolagem
• linha
• traço
• svg
• desenho
• zigue-zague
• diagonal
• portfólio
• projetos
• galeria
• rastro