SW Core / Animações / Sections (tela cheia)

Sections (tela cheia) Animações

Site contado em telas: cada tela ocupa a janela inteira e, ao rolar, a próxima entra no lugar da anterior — com a transição que você escolher para cada uma.

O que é

É o jeito de fazer aquelas páginas de apresentação em que a rolagem não "desce a página", e sim troca de tela: a primeira fica parada, a segunda entra por cima, depois a terceira aparece num círculo, e assim por diante. Cada tela é um sw-ani-section dentro de um bloco sw-ani="sections". Você escolhe a transição de cada troca com uma lista de nomes em sw-ani-fx.

O bloco prende na tela e as telas ficam uma sobre a outra. Cada trecho de rolagem faz a próxima entrar com a transição da vez: sw-ani-fx="cover|fade|zoom" quer dizer "a tela 2 entra com fade, a tela 3 com zoom" (o primeiro nome é o da tela 1, que já está lá — ele só decide o estilo geral). Uma tela pode ser mais alta que a janela e ter conteúdo rolando dentro (sw-ani-scroll) antes de a próxima entrar. No celular dá para trocar as transições ou desligar tudo. Precisa do pacote de animação.

Quando usar

Apresentação de produto ou serviço, landing page de campanha, portfólio: pouco texto, uma ideia por tela.
Não use em blog, loja, documentação ou páginas longas de texto: a pessoa perde a noção do tamanho da página e a busca do navegador (Ctrl+F) fica estranha.
Para prender uma seção só e animar coisas dentro dela, o certo é o Pin.

Comece aqui

Coloque o SW Core e o pacote de animação. O JS da animação vai antes do swcore.min.js.

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

<!-- fim do <body> -->
<script src="swcore/swcore.motion.min.js"></script>
<script src="swcore/swcore.min.js"></script>

Um bloco, duas ou mais telas dentro (filhas diretas) e a lista de transições. Os exemplos ao vivo estão logo abaixo — eles ocupam a tela inteira.

<div sw-ani="sections" sw-ani-fx="cover|fade|zoom">
  <section sw-ani-section>Tela 1 — quem somos</section>
  <section sw-ani-section>Tela 2 — entra com fade</section>
  <section sw-ani-section>Tela 3 — entra com zoom</section>
</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.

1. As 12 transições, uma por tela

Este quadro ocupa a tela inteira e prende a rolagem por 12 trocas. Cada tela diz com qual transição ela entrou. Role devagar (e volte para ver ao contrário).

Tela 1 · começo

Role devagar

Tela 2 · a nova tela sobe e cobre a anterior

cover

Tela 3 · igual ao cover, sem mexer na anterior

stack

Tela 4 · entra por baixo e empurra a anterior para cima

slide-up

Tela 5 · entra por cima e empurra a anterior para baixo

slide-down

Tela 6 · entra pela direita e empurra a anterior para a esquerda

slide-left

Tela 7 · entra pela esquerda e empurra a anterior para a direita

slide-right

Tela 8 · uma some enquanto a outra aparece

fade

Tela 9 · entra pequenininha e cresce; a anterior sai crescendo

zoom

Tela 10 · como o zoom, mais contido

scale

Tela 11 · abre num círculo que cresce do centro

mask

Tela 12 · entra de lado com corte inclinado

skew

Tela 13 · desdobra de cima para baixo, como uma folha

fold

<div sw-ani="sections" sw-ani-fx="cover|cover|stack|slide-up|slide-down|slide-left|slide-right|fade|zoom|scale|mask|skew|fold">
  <div sw-ani-section>Tela 1 (começo)</div>
  <div sw-ani-section>Tela 2 — entra com cover</div>
  <div sw-ani-section>Tela 3 — entra com stack</div>
  <div sw-ani-section>Tela 4 — entra com slide-up</div>
  <div sw-ani-section>Tela 5 — entra com slide-down</div>
  <div sw-ani-section>Tela 6 — entra com slide-left</div>
  <div sw-ani-section>Tela 7 — entra com slide-right</div>
  <div sw-ani-section>Tela 8 — entra com fade</div>
  <div sw-ani-section>Tela 9 — entra com zoom</div>
  <div sw-ani-section>Tela 10 — entra com scale</div>
  <div sw-ani-section>Tela 11 — entra com mask</div>
  <div sw-ani-section>Tela 12 — entra com skew</div>
  <div sw-ani-section>Tela 13 — entra com fold</div>
</div>

2. Em vez de trocar, andar para o lado

Com h-scroll (ou h-scroll-right) como primeiro nome, as telas ficam lado a lado e a rolagem as faz andar na horizontal. Também ocupam a tela inteira.

h-scroll · tela 1

Primeira

h-scroll · tela 2

Segunda

h-scroll · tela 3

Terceira

sw-ani-fx="h-scroll" — anda para a esquerda

<div sw-ani="sections" sw-ani-fx="h-scroll">
  <div sw-ani-section>Primeira</div>
  <div sw-ani-section>Segunda</div>
  <div sw-ani-section>Terceira</div>
</div>

h-scroll-right · tela 1

Primeira

h-scroll-right · tela 2

Segunda

h-scroll-right · tela 3

Terceira

sw-ani-fx="h-scroll-right" — começa na última e anda para a direita

<div sw-ani="sections" sw-ani-fx="h-scroll-right">
  <div sw-ani-section>Primeira</div>
  <div sw-ani-section>Segunda</div>
  <div sw-ani-section>Terceira</div>
</div>

Tabela de opções

Palavra	O que faz	Exemplo
Peças
`sw-ani="sections"`	O bloco. Ocupa a tela inteira e prende a rolagem enquanto as telas trocam.	`<div sw-ani="sections">`
`sw-ani-section`	Cada tela. Filha direta do bloco. Mínimo de duas.	`<section sw-ani-section>`
`sw-ani-scroll`	Dentro de uma tela: o miolo que rola por dentro antes de a próxima tela entrar.	`<div sw-ani-scroll>…</div>`
Transições (em sw-ani-fx, separadas por \|)
`cover`	a nova tela sobe e cobre a anterior	`sw-ani-fx="cover\|cover"`
`stack`	igual ao cover, sem mexer na anterior	`sw-ani-fx="cover\|stack"`
`slide-up`	entra por baixo e empurra a anterior para cima	`sw-ani-fx="cover\|slide-up"`
`slide-down`	entra por cima e empurra a anterior para baixo	`sw-ani-fx="cover\|slide-down"`
`slide-left`	entra pela direita e empurra a anterior para a esquerda	`sw-ani-fx="cover\|slide-left"`
`slide-right`	entra pela esquerda e empurra a anterior para a direita	`sw-ani-fx="cover\|slide-right"`
`fade`	uma some enquanto a outra aparece	`sw-ani-fx="cover\|fade"`
`zoom`	entra pequenininha e cresce; a anterior sai crescendo	`sw-ani-fx="cover\|zoom"`
`scale`	como o zoom, mais contido	`sw-ani-fx="cover\|scale"`
`mask`	abre num círculo que cresce do centro	`sw-ani-fx="cover\|mask"`
`skew`	entra de lado com corte inclinado	`sw-ani-fx="cover\|skew"`
`fold`	desdobra de cima para baixo, como uma folha	`sw-ani-fx="cover\|fold"`
`h-scroll`	Só como primeiro nome: as telas andam para o lado (esquerda).	`sw-ani-fx="h-scroll"`
`h-scroll-right`	Só como primeiro nome: começa na última tela e anda para a direita.	`sw-ani-fx="h-scroll-right"`
Ajustes do bloco
`sw-ani-fx`	A lista de transições, uma por tela, separadas por `\|`. Se a lista for menor que o número de telas, a última se repete. Padrão `cover`.	`sw-ani-fx="cover\|fade\|mask"`
`sw-ani-fx-mob`	Outra lista, usada no celular (abaixo de `sw-ani-break`).	`sw-ani-fx-mob="stack\|stack\|stack"`
`sw-ani-break`	Largura (px) abaixo da qual vale o modo celular. Padrão 767.	`sw-ani-break="900"`
`sw-ani-mobile="flow"`	No celular, desliga as trocas: as telas viram blocos empilhados normais.	`sw-ani-mobile="flow"`
`sw-ani-scrub`	Segundos de "atraso macio" das trocas atrás da rolagem. Padrão 0,7.	`sw-ani-scrub="1.2"`
Ajustes de uma tela
`sw-ani-h`	Altura do miolo rolável (`sw-ani-scroll`) daquela tela: `200%` = duas janelas. `auto` (padrão) mede sozinho.	`sw-ani-h="200%"`
`sw-ani-h-mob`	No celular, mede o conteúdo sozinho (e só aumenta, nunca diminui a altura de `sw-ani-h`).	`sw-ani-h-mob`
`sw-ani-h-at`	Altura por faixa de largura: `"min-max:altura"`, várias separadas por `\|`.	`sw-ani-h-at="0-767:300%\|768-*:200%"`
`sw-ani-size="flow"`	Numa tela: desliga as trocas do bloco inteiro (todas viram blocos empilhados; só as que têm `sw-ani-scroll` continuam presas enquanto o miolo rola).	`sw-ani-size="flow"`
`sw-ani-size="fit"`	Tela com altura exata da janela, cortando o que sobrar.	`sw-ani-size="fit"`
`sw-ani-size="scroll"`	Tela com altura da janela e barra de rolagem própria por dentro.	`sw-ani-size="scroll"`

Receitas prontas — usos reais

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

Essa seção prende a tela de verdade e se solta da moldura enquanto você rola — role bem devagar pra ver o efeito.

Novo

Fone Leve 2

Role para conhecer

30 horas de bateria

Carrega em 10 minutos.

Som que abraça

Cancelamento de ruído de verdade.

R$ 399

Comprar agora

<div sw-ani="sections" sw-ani-fx="cover|fade|zoom|mask">
  <section sw-ani-section class="flx f-cl j-ct alc t-ct bg-g-drk">
    <p>Novo</p><h2>Fone Leve 2</h2><p>Role para conhecer</p>
  </section>
  <section sw-ani-section class="flx f-cl j-ct alc t-ct bg-g-pri">
    <h2>30 horas de bateria</h2><p>Carrega em 10 minutos.</p>
  </section>
  <section sw-ani-section class="flx f-cl j-ct alc t-ct bg-g-sec">
    <h2>Som que abraça</h2><p>Cancelamento de ruído de verdade.</p>
  </section>
  <section sw-ani-section class="flx f-cl j-ct alc t-ct bg-g-suc">
    <h2>R$ 399</h2><a href="/comprar" sw-btn="lit pill g">Comprar agora</a>
  </section>
</div>

Essa seção prende a tela de verdade e se solta da moldura enquanto você rola — role bem devagar pra ver o efeito.

Nossa história

2014 — a primeira loja, com três mesas.

2018 — a cozinha nova e o delivery.

2022 — a segunda unidade, no centro.

2026 — você está aqui. Obrigado!

Venha nos visitar

<div sw-ani="sections" sw-ani-fx="cover|slide-left">
  <section sw-ani-section sw-ani-h="200%">
    <div sw-ani-scroll>
      <h2>Nossa história</h2>
      <p>2014 — a primeira loja, com três mesas.</p>
      <p>…</p>
    </div>
  </section>
  <section sw-ani-section>Venha nos visitar</section>
</div>

Celular: transições mais simples, ou nenhuma Referência

<!-- no computador desliza para o lado; no celular (até 767 px) só empilha por cima -->
<div sw-ani="sections"
     sw-ani-fx="cover|slide-left|slide-right"
     sw-ani-fx-mob="cover|stack|stack">
  …
</div>

<!-- ou: no celular, nada de trocar telas — vira página normal -->
<div sw-ani="sections" sw-ani-fx="cover|fade|zoom" sw-ani-mobile="flow">
  …
</div>

Menu que leva direto a uma tela Referência

<!-- o sw-scroll sabe calcular onde cada tela está dentro do sections -->
<nav>
  <a href="#bateria" sw-scroll>Bateria</a>
  <a href="#preco" sw-scroll>Preço</a>
</nav>

<div sw-ani="sections" sw-ani-fx="cover|fade|fade">
  <section sw-ani-section id="inicio">…</section>
  <section sw-ani-section id="bateria">…</section>
  <section sw-ani-section id="preco">…</section>
</div>

API (JavaScript)

SWMotion.sectionScrollTop(tela)

Devolve a posição de rolagem (em px) em que aquela tela está na frente — para você rolar até ela com window.scrollTo. O sw-scroll já usa isso sozinho.

SWMotion.activeSection(bloco)

Devolve a tela que está na frente agora. O Scrollspy já usa isso para acender o link certo do menu.

SWMotion.refresh()

Remonta tudo (use se trocar o conteúdo das telas por JavaScript).

Precisa de quê

swcore.min.css + swcore.motion.min.css, e swcore.motion.min.js antes do swcore.min.js.

Cuidados — erros comuns

Precisa de pelo menos duas telas, e elas têm que ser filhas diretas do bloco. Senão nada acontece (e aparece um aviso no console).
O primeiro nome de sw-ani-fx não é uma transição (a tela 1 já está lá), mas ele decide o estilo: h-scroll só funciona como primeiro nome, e começar com stack faz nenhuma tela anterior sair.
Nome de transição errado não quebra: vira cover e aparece um aviso no console.
sw-ani-size="flow" em uma tela desliga as trocas do bloco todo, não só daquela tela.
Cada tela ocupa no mínimo a altura da janela. Conteúdo maior que isso fica cortado — use sw-ani-scroll (com sw-ani-h) ou sw-ani-size="scroll".
Um sw-ani="move" dentro de uma tela só anda se a tela tiver um Frames; sozinho ele fica parado.
Transição que anda para o lado (slide-left, skew) em celular estreito pode vazar texto: use sw-ani-fx-mob.

O que ele não faz

É o efeito que mais mexe no jeito normal de rolar: use em peças curtas (até 6–7 telas).
Quem ativou "reduzir movimento" no aparelho vê as telas empilhadas, sem transições.
Não há evento próprio de "trocou de tela": para saber qual está na frente, use SWMotion.activeSection(bloco) num evento de rolagem.

← AnteriorTrack (fileira horizontal) Próximo →Frames (sprite no scroll)