Disco que Sai da Capa Plus

Sobre este efeito

Capas de disco lado a lado, cada uma com um vinil guardado atrás. Passando o mouse numa capa, o disco sai de trás dela deslizando e pega velocidade até girar como num toca-discos, com o rótulo do meio mostrando a própria capa e um reflexo de luz que fica parado enquanto os sulcos giram. Tirando o mouse, ele volta pra capa freando aos poucos, sem parar seco. Uma etiqueta com o nome do disco acompanha o cursor com um atraso curto e troca de lado perto da borda da tela. Funciona pelo teclado (o foco tira o disco e a etiqueta aparece embaixo da capa) e no toque (o primeiro toque tira o disco, o segundo abre o link, e um toque fora guarda). Cada capa escolhe de que lado o disco sai; sem escolha, ele sai pra direita, ou pra esquerda se não couber na tela. O disco é desenhado em CSS, sem imagem. Tamanho da capa, vão, quanto sai, tamanho do disco, tempo de saída, rotações por minuto, arranque, freio, cor do vinil e dos sulcos, reflexo e sombra ajustáveis. Com menos movimento, o disco sai sem girar. Sem biblioteca.

Ficha

Categoria

Hover

Onde combina

recursos, prova social, chamada pra ação

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

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

No celular

Moderado: usa 24% 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-disco-que-sai-da-capa.

Assuntos

• hover
• disco
• vinil
• música
• capa
• álbum
• toca-discos
• etiqueta
• cursor
• portfolio
• css
• js