Vídeo controlado
pelo scroll
Com sm-video-scrub="true" na tag <video>, o tempo do vídeo é vinculado ao scroll da página. Pino automático, velocidade configurável.
Parâmetros disponíveis
Todos os atributos que controlam o Video Scrub.
| Atributo | Tipo | Descrição | Exemplo |
|---|---|---|---|
| sm-video-scrub | true | Ativa o controle por scroll | "true" |
| sm-scroll-pin | seletor CSS | Elemento a ser pinado durante o scrub | ".cinema-section" |
| sm-scroll-end | string GSAP | Ponto de fim do pin (quanto rolar) | "+=300% bottom" |
| sm-scroll-scrub | número | Suavidade do scrub (0 = imediato) | "0.5" |
| muted playsinline preload | atributos HTML | Necessários para autoplay sem som em mobile | obrigatórios |
Video Scrub básico — scroll controla o tempo
sm-video-scrub="true"Scroll = Timeline do vídeo
O vídeo abaixo está ancorado (pinado) enquanto você rola. O tempo do vídeo avança de acordo com a posição do scroll. sm-scroll-end="+=300% bottom" define que você precisa rolar 3x a altura da tela para ver o vídeo completo.
sm-video-scrub="true"
sm-scroll-pin=".cinema-section" // elemento que fica fixo
sm-scroll-end="+=300% bottom" // rola 3x a altura
sm-scroll-scrub="0.5" // suavidade 0–1+
muted playsinline preload="auto"
>
<source src="video.mp4" type="video/mp4">
</video>
sm-scroll-scrub — suavidade do scrub
sm-scroll-scrub="0.5"Controlando a física do scrub
O valor de sm-scroll-scrub define o quanto o vídeo "atrasa" em relação ao scroll. Valores maiores criam uma inércia mais suave.
Sincronizado 1:1 com o scroll. Sem inércia.
// ou só: sm-scroll-scrub="true"
Leve inércia. Parece mais cinematic.
Inércia forte. O vídeo "corre atrás" do scroll.
sm-scroll-end — quanto rolar para assistir
sm-scroll-end="+=300% bottom"Duração do scroll pin
Define o quanto o usuário precisa rolar para que o vídeo vá do início ao fim. A sintaxe é do GSAP ScrollTrigger.
Rola N vezes a altura da viewport para completar o vídeo.
// 2x a altura da tela
sm-scroll-end="+=300% bottom"
// 3x a altura da tela
Valor fixo em pixels independente do tamanho da tela.
// rola 2000px para completar
sm-scroll-end="+=4000px"
// mais lento, mais "luxuoso"
Código completo do exemplo acima:
<div class="cinema-section">
<video
class="cinema-video"
sm-video-scrub="true"
sm-scroll-pin=".cinema-section"
sm-scroll-end="+=300% bottom"
sm-scroll-scrub="0.5"
muted playsinline preload="auto"
>
<source src="meu-video.mp4" type="video/mp4">
</video>
<!-- conteúdo sobreposto fica aqui (z-index maior) -->
</div>
/* CSS mínimo necessário: */
.cinema-section { position: relative; height: 100vh; overflow: hidden; }
.cinema-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }