Vídeo que Cresce Ultra

Sobre este efeito

Uma seção presa na tela enquanto a página rola: o vídeo começa pequeno, como uma miniatura no meio, cresce até o tamanho inteiro e fica parado inteiro por um trecho antes de a página seguir. O canto mantém a mesma curva em qualquer tamanho e o texto por cima não encolhe: aparece quando o vídeo já cresceu o bastante pra ficar embaixo dele, com um véu que escurece o vídeo atrás das letras. Segue a posição da rolagem e encolhe de novo ao subir. Há uma largura mínima no começo (nada de miniatura minúscula no celular), a caixa muda de formato na tela em pé, o vídeo pausa fora da tela, tem botão de pausa e a preferência de menos movimento mostra o vídeo inteiro parado. Percurso, ponto de chegada, tamanho inicial, largura mínima, largura inteira, formato, véu e curva ajustáveis. CSS + JS pequeno, 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

Exclusivo de quem assina o Ultra (R$ 39,90/mês).

Peso

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

No celular

Leve: usa 17% 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-video-que-cresce.

Assuntos

• scroll
• video
• sticky
• hero
• escala
• midia