Cápsula de Vídeo Plus

Sobre este efeito

Uma seção fica presa na tela enquanto a página rola: o vídeo começa numa cápsula pequena no meio e se abre até ocupar a janela inteira, perdendo a curva do canto no fim, enquanto título e botões deslizam até o lugar. Tudo segue a posição da rolagem. A cápsula é calculada em pixels, então é pílula em qualquer tela, inclusive no celular. O vídeo pausa fora da tela, tem botão acessível de pausar e tocar, aceita imagem no lugar do vídeo e tem fundo se a mídia falhar; a preferência de menos movimento mostra a janela aberta sem prender a seção e com o vídeo parado. Percurso, tamanhos, cápsula inicial, escala, ponto de abertura e canto ajustáveis. Sem biblioteca.

Ficha

Categoria

Scroll

Onde combina

topo (hero), transições

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

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

No celular

Moderado: usa 21% 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-capsula-de-video.

Assuntos

• video
• scroll
• hero
• sticky
• clip-path
• revelar
• janela
• js