Coreografia de Quadros Plus

Seção travada com quatro quadros em grade: dois se escondem atrás dos vizinhos, os pares se juntam no centro e o da frente cresce até a tela cheia.

Ver na loja e baixar

Sobre este efeito

Passagem de vários trabalhos pra um só: a seção trava na tela com quatro quadros em grade e, rolando, a cena se fecha em três atos. Dois quadros deslizam e se escondem atrás dos vizinhos, os dois que sobram se juntam no centro, e o da frente cresce até ocupar a tela inteira enquanto os outros somem. Texto opcional que aparece por cima do destaque no fim. Abertura de case, capa de coleção, entrada de filme. Tamanho dos quadros, afastamento, canto, sombra e altura da seção ajustáveis. Só CSS, sem biblioteca.

Ficha

Categoria: Scroll
Onde combina: topo (hero), transições, recursos
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: 4,0 KB de código comprimido. Sem biblioteca externa.
No celular: Leve: usa 19% do processador de um celular intermediário enquanto anima.
Na loja desde: 11/09/2026

Como colocar no seu site

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.
Usando um construtor (Elementor, Shopify, Webflow e outros): a loja mostra o passo a passo de cada um.
Programando: importe o efeito.css e o efeito.js e marque o elemento com a classe fx-coreografia-de-quadros.

Assuntos

parallax
scroll
rolagem
sticky
coreografia
quadros
grade
tela-cheia
portfolio
cinematografico
css-puro