Entrar ao rolar (sw-revela) CSS

O que é

É o efeito de "surgir ao rolar" que quase todo site moderno tem: os cards, fotos e textos vão aparecendo à medida que a pessoa desce a página. Você coloca sw-revela no elemento e pronto. Ele sobe e aparece por padrão; com uma palavra dentro do atributo ele pode crescer (zoom), vir da esquerda (esq), da direita (dir) ou só clarear (fade). Com lento ou rapido você muda o quanto a pessoa precisa rolar para ele terminar de aparecer.

A animação é presa à rolagem, não ao tempo: rolou para baixo, aparece; voltou para cima, ela "desaparece" de novo, no ritmo do dedo. Quem faz isso é o próprio navegador — é leve e não trava a página. Em navegador antigo, ou se a pessoa ligou "reduzir movimento" no celular/computador, o conteúdo simplesmente aparece parado: nada fica escondido.

Quando usar

• Cards de serviços, produtos ou depoimentos surgindo ao rolar: sw-revela.
• Foto e texto lado a lado: a foto vem de um lado (esq) e o texto do outro (dir).
• Número, selo ou destaque que "cresce" ao aparecer: sw-revela="zoom".
• Seção inteira com entrada discreta: sw-revela="fade lento".
• Precisa de linha do tempo com várias etapas, prender a tela (pin) ou texto letra a letra? Aí é a área Animações (sw-ani / GSAP).

Comece aqui

1. 1

   Coloque o SW Core no <head>. O sw-revela está no arquivo principal — não precisa do pacote de animação.

   <link rel="stylesheet" href="swcore/swcore.min.css">

2. 2

   Coloque sw-revela no elemento. Role a página para ver ele entrar.

   Corte + barba

   A partir de R$ 60

   <div sw-card="sha" sw-revela>
     <div class="sw-card-bdy">
       <strong>Corte + barba</strong>
       <p class="m-0 t-mut t-p">A partir de R$ 60</p>
     </div>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div class="l l-3 gap-4">
  <div sw-card="sha" sw-revela>…Corte…</div>
  <div sw-card="sha" sw-revela="lento">…Coloração…</div>
  <div sw-card="sha" sw-revela="zoom">…Dia da noiva…</div>
</div>

<div class="l l-2 gap-6 alc">
  <div class="ar-4-3 r-m ov-hi" sw-revela="esq">
    <img src="/equipe.jpg" alt="Nossa equipe" class="media-fill">
  </div>
  <div sw-revela="dir">
    <h3 class="mt-0">Quem somos</h3>
    <p class="t-mut">Há 12 anos cuidando do seu cabelo, no centro da cidade.</p>
    <a href="/agendar" sw-btn="pri">Agendar horário</a>
  </div>
</div>

<div sw-revela="zoom rapido">
  <p class="t-xg fw7 m-0 t-pri">+1.200</p>
  <p class="m-0 t-mut">clientes atendidos</p>
</div>

Precisa de quê

• swcore.min.css (2.1.0 ou mais novo). Não precisa de JavaScript nem do pacote de animação.
• Navegador com "animações ligadas à rolagem". Sem isso, o conteúdo aparece parado — nada some.

Cuidados — erros comuns

• Não funciona dentro de caixa que corta ou rola (ov-hi, ovx, ovy ou um sw-card, que corta por padrão): a animação passa a seguir essa caixa, que não rola, e fica parada. Coloque o sw-revela no próprio card ou numa caixa sem corte.
• Uma palavra de efeito por vez: sw-revela="esq dir" não soma, vale só a última regra do CSS. Ritmo (lento/rapido) pode ir junto.
• Se "não anima" no seu computador, confira se o sistema está com "reduzir movimento" ligado — nesse caso o SW Core mostra tudo parado de propósito.
• O efeito volta ao rolar para cima (ele desaparece de novo). Se você quer que anime só uma vez e fique, use sw-ani da área Animações.
• Não coloque em conteúdo que já está visível quando a página abre (o topo): ele pode começar pela metade. Use em seções mais abaixo.

O que ele não faz

• Sem atraso entre itens (efeito cascata) nem duração em segundos: o ritmo é sempre pela rolagem. Para cascata, use Cascade.
• Só existem os 5 efeitos e os 2 ritmos da tabela.