Parede em Diagonal Plus

Sobre este efeito

Fundo de seção feito de fotos: uma parede inclinada em fileiras de cartões que correm sem parar, uma pra cada lado, cada uma num ritmo um pouco diferente; um véu escuro por cima das fotos deixa o texto legível e uma névoa na cor do fundo apaga a parede em cima e embaixo. Por padrão: cartões de 400×300 com vão de 32 px, cantos e sombra, parede a −25° com o dobro da largura da tela, cinco fileiras entre 54 e 74 px por segundo alternando o sentido, véu de 40% e névoa no quarto de cima e no de baixo. Aceita qualquer quantidade de fotos e repete as que faltarem; cobre a seção em qualquer tamanho. Inclinação, tamanho dos cartões, vão, cantos, sombra, véu, velocidade, cor e altura da névoa ajustáveis; opcionalmente a fileira para com o mouse em cima. Só CSS, para fora da tela e fica parado com a preferência de menos movimento. Sem biblioteca.

Ficha

Categoria

Fundo

Onde combina

topo (hero), transições

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

4,7 KB de código comprimido. Sem biblioteca externa.

No celular

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

Na loja desde

13/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-parede-em-diagonal.

Assuntos

• marquee
• letreiro
• fotos
• galeria
• parede
• diagonal
• fundo
• hero
• portfólio
• loop
• css