Foto em Ladrilhos Ultra

Sobre este efeito

Lista de destinos, serviços ou projetos em letras grandes, com a foto do item ativo ao lado. Passando o mouse num item, a foto dele se monta em peças, e cada item escolhe o jeito: ladrilhos que voam de todos os lados girando, fatias que entram alternando pela esquerda e pela direita, colunas que caem de cima ou um mosaico de blocos que crescem no lugar. A foto que sai se desmonta de onde está, então trocar de item no meio da montagem não dá salto, e voltar pro item anterior faz as peças voltarem do meio do caminho. Funciona pelo teclado; no celular o toque escolhe o item (num link, o primeiro toque mostra a foto e o segundo segue o link) e a foto fica presa no topo enquanto a lista passa. Colunas, linhas, fatias, vão, duração, espalhamento, distância, giro, canto e formato da foto ajustáveis. a preferência de menos movimento troca a foto num esmaecer curto. Sem biblioteca.

Ficha

Categoria

Interação

Onde combina

recursos, menu/navegação

Alcance

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

Plano

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

Peso

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

No celular

Leve: usa 9% 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-foto-em-ladrilhos.

Assuntos

• interacao
• lista
• hover
• foto
• imagem
• mosaico
• ladrilhos
• montagem
• destinos
• portfolio
• servicos
• css
• js