Anel que Vira Arco Ultra

Sobre este efeito

Hero de fotos em duas partes. Quando a seção aparece, as fotos saem de um monte no meio, se espalham, entram em fila e fecham um anel em volta do título. Aí a seção fica presa enquanto a página rola: o anel se abre num arco largo no pé da tela, as fotos crescem e o resto da rolagem passa a fila inteira pelo arco, uma foto de cada vez pelo topo; subindo, o arco fecha o anel de novo. O mouse puxa o arco de leve pro lado. A rolagem é a da própria página, que segue normalmente depois da seção. O arco é um laço: a foto que sai por um lado volta pelo outro, fora da vista, então o palco nunca fica vazio. No caminho do anel pro arco, cada foto gira o mínimo. No celular o anel cresce ou as fotos encolhem até caber, e o título quebra linha dentro dele. Parado, não gasta nada. Com a preferência de menos movimento, as fotos aparecem paradas no arco. Aceita de 8 a 40 fotos. Percurso, abertura do arco, voltas, tamanhos, tempos, cascata, puxada do mouse e atraso macio ajustáveis.

Ficha

Categoria

Scroll

Onde combina

topo (hero), transições

Alcance

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

Plano

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Peso

8,0 KB de código comprimido. Sem biblioteca externa.

No celular

Moderado: usa 26% do processador de um celular intermediário enquanto anima.

Na loja desde

24/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-anel-que-vira-arco.

Assuntos

• parallax
• scroll
• rolagem
• sticky
• galeria
• fotos
• anel
• arco
• hero
• mola