Cartão que Endireita Plus

Sobre este efeito

Um cartão com foto e texto chega deitado pra trás e se endireita com a rolagem: perde a inclinação, cresce até o tamanho inteiro e sobe até o lugar, enquanto as linhas do texto assentam uma depois da outra, a foto recua de leve e um reflexo no alto some. Segue a posição da rolagem e volta ao rolar pra cima. Termina quando o meio do cartão chega no meio da tela, em qualquer tamanho de tela, com perspectiva de verdade, texto em sequência e véu pra leitura; a preferência de menos movimento deixa o cartão reto e parado. Inclinação, tamanho, descida, perspectiva, texto, reflexo, sombra, véu, ponto de chegada e curva ajustáveis. CSS + JS pequeno, sem biblioteca.

Ficha

Categoria

Scroll

Onde combina

topo (hero), prova social

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,3 KB de código comprimido. Sem biblioteca externa.

No celular

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

Na loja desde

15/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-cartao-que-endireita.

Assuntos

• scroll
• 3d
• perspectiva
• cartao
• hero
• imagem
• texto