Leque que Vira Mosaico Ultra

Sobre este efeito

Uma abertura de página que vira galeria com a rolagem. No começo, um título e, embaixo dele, um leque de fotos, como cartas na mão. Rolando, a tela trava e as fotos voam pro seu lugar num mosaico de tela cheia: desviram, crescem e vêm um pouco pra frente no meio do voo, juntas ou uma depois da outra, enquanto o título sobe, encolhe e some. As fotos seguem a rolagem com um pouco de inércia, e voltando a rolagem tudo volta pro leque. Um pulo brusco (link, tecla End, barra de rolagem) vira voo animado em vez de aparecer pronto, e um botão pode levar até o mosaico rolando devagar. O efeito mede onde cada foto termina, então o mosaico pode ser redesenhado no CSS com outro número de fotos. No celular, o mosaico vira duas colunas. Com a preferência de menos movimento, nada trava nem voa: o título em cima e o mosaico pronto embaixo. Altura da rolagem, tamanho das fotos no leque, abertura do leque, atraso entre as fotos, espaço do mosaico e sombra ajustáveis. CSS e JavaScript puros.

Ficha

Categoria

Scroll

Onde combina

topo (hero), recursos, transições

Alcance

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

Plano

Exclusivo do Ultra (R$ 39,90/mês) até 25/10/2026; depois entra no Plus.

Peso

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

No celular

Leve: usa 8% 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-leque-que-vira-mosaico.

Assuntos

• scroll
• rolagem
• galeria
• fotos
• mosaico
• bento
• leque
• hero
• sticky