Livro que Folheia Plus

Sobre este efeito

Um cartão em pé que funciona como livro: a página de papel vira com dobra de verdade (o canto levanta, o verso aparece liso, sombra na página de baixo e em volta da aba) e a capa vira inteira, como papelão, girando em 3D presa na lombada. No clique, o canto anda até o outro lado da lombada em cerca de 0,7 s; arrastando, o canto fica exatamente embaixo do ponteiro, a dobra acompanha qualquer ângulo e a página completa quando o canto passa da lombada. Dá pra pegar a folha no meio sem o canto pular até a mão; soltar em movimento segue o embalo; parado, decide pela posição. Não dispara com clique em link ou botão da página, vira pelas setas do teclado, anuncia a página pro leitor de tela, não cria barra de rolagem durante a virada e respeita a preferência de menos movimento. Duração, sombra, cor do verso e tamanho ajustáveis. Sem biblioteca.

Ficha

Categoria

Interação

Onde combina

recursos, prova social

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

10 KB de código comprimido. Sem biblioteca externa.

No celular

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

Na loja desde

14/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-livro-que-folheia.

Assuntos

• interacao
• livro
• pagina
• virar
• dobra
• flip
• arrastar
• capa
• 3d
• catalogo
• js