Galeria que se Arruma Plus

Sobre este efeito

Uma grade de fotos com filtros em cima. Ao escolher um filtro, as fotos que não entram encolhem e somem no lugar, as que ficam deslizam da posição antiga para a nova, uma depois da outra, e as que voltam nascem do tamanho zero já no lugar certo. Sem biblioteca: o efeito mede onde cada foto está, aplica o filtro, mede de novo e anima só a diferença, com transformação e opacidade, então cada troca é leve. Trocar de filtro no meio do movimento não faz nada pular: cada foto continua de onde está, do tamanho e da transparência em que está. Com menos movimento, o filtro troca na hora. Os filtros viram um grupo de opções acessível (Tab entra pela opção escolhida, as setas escolhem) e um aviso discreto conta ao leitor de tela quantas fotos ficaram. Uma foto pode estar em vários grupos. Colunas, tamanho, espaço, tempos e atraso entre as fotos ajustáveis.

Ficha

Categoria

Galeria

Onde combina

prova social, recursos

Alcance

Área: vive dentro de um bloco da página.

Plano

Incluso no Plus (R$ 19,90/mês) e no Ultra (R$ 39,90/mês).

Peso

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

No celular

Leve: usa 6% do processador de um celular intermediário enquanto anima.

Na loja desde

18/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-galeria-que-se-arruma.

Assuntos

• galeria
• filtro
• portfolio
• grade
• flip
• fotos
• teclado