SWCore / Animações / Sections (tela cheia)

Sections (tela cheia) Animações

Storytelling de tela cheia — uma tela SUBSTITUI a outra, presa ao scroll. A base de sites inteiros feitos em uma rolagem só.

O que é

Cada "tela" ocupa o viewport inteiro; ao rolar, uma seção substitui a outra com uma transição própria (cada transição pode ter seu próprio efeito). Uma tela pode ter mais de um "ambiente" interno rolável antes de passar pra próxima.

Como funciona

sw-ani-fx aceita uma lista de efeitos separados por "\|", um por seção (o 1º nome nunca é usado — a 1ª tela é só o ponto de partida, sem transição de entrada).

Exemplos

Como se monta Ao vivo

Cada seção ocupa a tela inteira e a rolagem troca uma pela outra. É a base de sites que contam uma história numa rolagem só.

Por ser tela cheia e prender o scroll, não cabe numa caixa de exemplo sem sequestrar a leitura desta página — o código ao lado é o completo.

<div sw-ani="sections" sw-ani-fx="cover|fade|zoom">
  <div sw-ani-section>tela 1</div>
  <div sw-ani-section>tela 2</div>
  <div sw-ani-section>tela 3</div>
</div>

<!-- precisa de PELO MENOS duas seções, senão ele avisa no console -->
A cadeia de transições Ao vivo

O sw-ani-fx recebe uma transição por seção, separadas por |. O primeiro nome nunca é usado de fato: a primeira tela é só o ponto de partida, não tem de onde entrar.

Se você escrever um efeito que não existe, ele avisa no console e usa cover — não quebra a página.

<!-- 4 telas, 4 nomes (o 1º é ignorado) -->
<div sw-ani="sections" sw-ani-fx="cover|fade|zoom|slide-left">
  <div sw-ani-section>…</div>
  <div sw-ani-section>…</div>
  <div sw-ani-section>…</div>
  <div sw-ani-section>…</div>
</div>

<!-- os 13: cover stack slide-up slide-down slide-left slide-right
     fade zoom scale mask skew fold · h-scroll h-scroll-right -->
No celular — o ajuste que evita vazamento Ao vivo

Transição horizontal em tela estreita costuma vazar texto pela borda. Em vez de reescrever tudo, troque a cadeia inteira abaixo do breakpoint com sw-ani-fx-mob.

E se o efeito não fizer sentido nenhum no celular, sw-ani-mobile="flow" desliga a mágica e as seções voltam a ser blocos empilhados comuns — o conteúdo continua lá, só sem o cinema.

<!-- no desktop desliza; no celular empilha -->
<div sw-ani="sections"
     sw-ani-fx="slide-right|slide-left|cover"
     sw-ani-fx-mob="stack|stack|stack"
     sw-ani-break="767">
  …
</div>

<!-- ou simplesmente desliga no celular -->
<div sw-ani="sections" sw-ani-mobile="flow">…</div>
Uma seção mais alta, com rolagem interna Ao vivo

Dá pra ter uma tela que segura mais conteúdo do que cabe no viewport: marque a altura com sw-ani-h e o miolo rolável com sw-ani-scroll. A seção prende o scroll enquanto esse conteúdo interno passa, e só então libera pra próxima.

<div sw-ani="sections" sw-ani-fx="cover|fade">

  <!-- um "hero" alto, com dois ambientes internos -->
  <div sw-ani-section sw-ani-h="210%">
    <div sw-ani-scroll>
      …conteúdo mais alto que a tela…
    </div>
  </div>

  <div sw-ani-section>tela seguinte</div>
</div>

<!-- uma seção específica pode ficar de fora do efeito: -->
<div sw-ani-section sw-ani-size="flow">não prende o scroll</div>
Quando NÃO usar Ao vivo

Sections reescreve o gesto mais básico da web: rolar. Em site de conteúdo, blog, documentação ou e-commerce, isso atrapalha — o visitante perde a noção de tamanho da página e o Ctrl+F fica estranho.

Faz sentido em apresentação de produto, landing de campanha e portfólio: peças curtas, onde a sequência É o conteúdo.

<!-- regra prática: se a página tem mais de 6 ou 7 telas,
     provavelmente ela quer ser uma página normal -->

Atributos

sw-ani-fx
a cadeia de transições, separadas por "\|" — uma por seção
sw-ani-fx-mob
outra cadeia, usada abaixo do breakpoint (slide horizontal vaza em tela estreita)
sw-ani-break
onde começa o "mobile" — padrão 767
sw-ani-mobile
"flow" desliga o efeito no celular e volta a empilhar normalmente
sw-ani-section
em cada tela (precisa de pelo menos duas)
sw-ani-h
altura daquela seção — aceita valores altos (ex.: "210%") pra caber conteúdo interno
sw-ani-scroll
marca o conteúdo interno rolável de uma seção alta
sw-ani-size
"flow" naquela seção: ela não prende o scroll, só empilha

Variantes

cover (padrão)
a nova tela sobe cobrindo a anterior
stack
as telas se empilham
slide-up \| slide-down
entra por cima/por baixo e a anterior sai pro lado oposto
slide-left \| slide-right
o mesmo, na horizontal
fade
uma desaparece enquanto a outra aparece
zoom
entra bem pequena e cresce; a anterior sai crescendo
scale
igual ao zoom, porém mais contido
mask
a nova tela abre num círculo que cresce do centro
skew
entra na diagonal, com corte inclinado
fold
desdobra de cima pra baixo, como uma folha
h-scroll \| h-scroll-right
em vez de trocar telas, a sequência anda na horizontal

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • Precisa do pacote swcore.motion.min.css/js.

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

  • Precisa de pelo menos duas [sw-ani-section], e elas têm que ser filhas diretas do contêiner.
  • Prende a rolagem da página: é o componente mais invasivo da família. No celular, considere sw-ani-mobile="flow".
  • Quem pediu menos movimento no sistema (prefers-reduced-motion) recebe a versão sem as transições — conte com isso e não esconda conteúdo atrás do efeito.
← AnteriorTrack (fileira horizontal) Próximo →Frames (sprite no scroll)