SWCore
SWCore / CSS / Entrar ao rolar (sw-revela)

Entrar ao rolar (sw-revela) CSS

O conteúdo aparece conforme entra na tela — preso à rolagem, sem uma linha de JavaScript.

O que é

Troca o IntersectionObserver e o ScrollTrigger simples. A animação acompanha o dedo: rolou pra frente, aparece; voltou, desaparece. Roda na placa de vídeo (só opacidade e deslocamento).

Como funciona

Usa animation-timeline: view() (scroll-driven animations, nos 4 navegadores desde 2026). Está dentro de @supports e de prefers-reduced-motion: em navegador antigo ou com "reduzir movimento" ligado, o conteúdo simplesmente aparece parado — nada some.

Exemplos

Role a página: os cartões entram Ao vivo

sobe

padrão

zoom

cresce

esq

vem da esquerda

dir lento

vem da direita

<section sw-revela>...</section>
<div sw-revela="zoom">...</div>
<img sw-revela="esq lento" src="...">

Atributos

sw-revela
sobe e aparece (padrão)
sw-revela="zoom\|esq\|dir\|fade"
outro efeito de entrada
sw-revela="... lento\|rapido"
faixa de rolagem maior (lento) ou menor (rápido)

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • swcore.min.css 2.1.0

Limitações — o que ele não faz

  • Para linha do tempo com várias etapas, pin ou sequência de frames, use sw-ani (GSAP).
← AnteriorCSS nativo — visão geral Próximo →Barra de leitura (sw-progresso)