Premium — Vídeo Scrub
Com sw-premium-video-scrub="true" na tag
<video>, o tempo do vídeo é vinculado ao scroll da página — pin automático,
velocidade configurável. Equivalente ao Lab 04 (demo-video.html) do Smooll original.
Parâmetros disponíveis
| Atributo | Tipo | Descrição |
|---|---|---|
sw-premium-video-scrub |
true | Ativa o controle do tempo do vídeo pelo scroll |
sw-premium-scroll-pin |
seletor CSS | Elemento a ser pinado durante o scrub, ex: ".cinema-section" |
sw-premium-scroll-end |
string GSAP | Quanto rolar até completar, ex: "+=300%" (da altura da viewport) ou "+=2000px" |
sw-premium-scroll-scrub |
número | Suavidade/inércia (0 = imediato, 2+ = pesado) |
muted playsinline preload |
atributos HTML nativos | Necessários para autoplay sem som em mobile |
1. Video Scrub básico — role pra controlar o tempo
sw-premium-scroll-end="+=200%" define que é preciso
rolar 2x a altura da tela para ver o vídeo completo.
2. sw-premium-scroll-scrub — suavidade
Define o quanto o vídeo "atrasa" em relação ao scroll. Valores maiores criam inércia mais suave.
0
Imediato
Sincronizado 1:1 com o scroll, sem inércia.
0.5
Suave (recomendado)
Leve inércia, sensação mais cinematográfica.
2+
Pesado
Inércia forte — o vídeo "corre atrás" do scroll.
3. sw-premium-scroll-end — duração do pin
Define o quanto o usuário precisa rolar para o vídeo ir do início ao fim. Sintaxe do GSAP ScrollTrigger.
Baseado em %
Rola N vezes a altura da viewport.
"+=200% bottom" / "+=300% bottom"
Baseado em px
Valor fixo, independente do tamanho da tela.
"+=2000px" / "+=4000px"
4. Segundo exemplo — scrub imediato (sw-premium-scroll-scrub="0")
Mesma mecânica, sem inércia — sincronizado direto com a posição do scroll.