SWCore
SWCore / Animações / Fundo que muda (drift)

Fundo que muda (drift) Animações

O fundo da página vai mudando de cor, bem devagar, conforme cada seção entra na tela. A página parece um lugar só, e não uma pilha de blocos.

O que é

Cada seção diz a cor dela com sw-drift="#cor". Enquanto a pessoa rola, o fundo da página passa de uma cor para a outra junto com a rolagem — sem corte, sem piscar. De um quadro para o outro ninguém percebe; do topo até o fim, a mudança é clara. Veja numa página inteira no exemplo Café Serra.

O motor pinta a variável --sw-drift no <html>, presa à rolagem, e o CSS do pacote aplica essa variável no fundo do <body> quando existe drift na página. Cada troca começa quando a seção nova passa de 85% da tela e termina quando ela chega a 25%. Com sw-drift-light você dá a cor do modo dia; ao trocar dia/noite, ele se remonta com as cores do outro tema. Com "reduzir movimento" ligado, a cor troca de uma vez, sem transição.

Quando usar

  • Página longa de marca com várias seções de fundo escuro (ou claro) — dá sensação de viagem.
  • Contar uma história: amanhecer → dia → noite, ou cores de cada etapa de um processo.
  • Não use para mudar de preto para creme no meio da página: salto grande parece erro, não clima. Fique na mesma família de cor.
  • Seções com fundo próprio (bg-sur, foto) tampam o drift. Deixe as seções sem fundo para ele aparecer.

Comece aqui

  1. 1

    Coloque o SWCore e o pacote de animação.

    <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.2.0/swcore.min.css">
<link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.2.0/swcore.motion.min.css">

<!-- fim do <body> -->
<script src="https://swcore.sanweb.com.br/dist/2.2.0/swcore.motion.min.js"></script>
<script src="https://swcore.sanweb.com.br/dist/2.2.0/swcore.min.js"></script>
  2. 2

    Dê uma cor para cada seção. De 3 a 5 paradas, com passos pequenos.

    <section sw-drift="#141019">…</section>
<section sw-drift="#10161a">…</section>
<section sw-drift="#1a1410">…</section>

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. Página escura que "viaja"

Role a página devagar com o quadro na tela: o fundo passa de uma cor para a outra sem corte. Aqui o drift está dentro de uma caixa (sw-drift-box) para não pintar esta documentação; no seu site, sem a caixa, ele pinta a página inteira.

Seção 1

Violeta bem escuro.

Seção 2

Vira um azul-petróleo escuro.

Seção 3

E termina num marrom-café.

3 paradas na mesma família (noite) 
<section sw-drift="#141019">…</section>
<section sw-drift="#10161a">…</section>
<section sw-drift="#1a1410">…</section>

2. Dia e noite com cores próprias

Com sw-drift-light cada seção tem a cor do modo dia. Troque o tema no botão do topo e role de novo: ele usa as cores claras.

Madrugada

Azul frio.

Manhã

Neutro, clareando.

Fim de tarde

Esquenta para o âmbar.

Madrugada → manhã → fim de tarde 
<section sw-drift="#12141c" sw-drift-light="#eef1f6">Madrugada</section>
<section sw-drift="#161a22" sw-drift-light="#f4f2ec">Manhã</section>
<section sw-drift="#1c1612" sw-drift-light="#f5ece2">Fim de tarde</section>

3. Só um pedaço da página (sw-drift-box)

Quer o efeito só num bloco — uma linha do tempo, um "antes e depois"? Envolva as seções numa caixa com sw-drift-box: ela pinta só aquela caixa, e a página pode ter várias.

2019

Começou numa garagem.

2022

Primeira loja.

2026

Presente em 12 cidades.

Linha do tempo de uma marca 
<div sw-drift-box>
  <section sw-drift="#0f1a14" sw-drift-light="#eaf3ee">2019</section>
  <section sw-drift="#0f1620" sw-drift-light="#e9eef6">2022</section>
  <section sw-drift="#1f1410" sw-drift-light="#f6ebe4">2026</section>
</div>

Tabela de opções

PalavraO que fazExemplo
Em cada seção
sw-driftA cor de fundo da página quando esta seção está na tela (qualquer cor CSS: #hex, rgb()).sw-drift="#141019"
sw-drift-boxNa caixa em volta das seções: o drift pinta só essa caixa, não a página. Pode ter várias caixas.<div sw-drift-box>
sw-drift-lightA cor no modo dia (sw-theme="light"). Sem ela, usa a mesma do modo noite.sw-drift-light="#f3eee8"
No CSS
--sw-driftVariável com a cor da vez, no <html>. Use em outros lugares se quiser (borda, sombra, navbar).border-color: var(--sw-drift);

Receitas prontas — usos reais

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

Amanhecer → dia → entardecer (noite e dia) Referência 
<section sw-drift="#12141c" sw-drift-light="#eef1f6">Madrugada</section>
<section sw-drift="#161a22" sw-drift-light="#f4f2ec">Manhã</section>
<section sw-drift="#1c1612" sw-drift-light="#f5ece2">Fim de tarde</section>
Navbar que acompanha a cor do fundo Referência 
.minha-navbar { background: color-mix(in srgb, var(--sw-drift) 85%, transparent); }

Precisa de quê

  • swcore.motion.min.css e swcore.motion.min.js na versão 2.2.0 ou mais nova.

Cuidados — erros comuns

  • "Não mudou nada": a seção (ou um bloco em volta) tem fundo próprio e tampa o do body.
  • Com uma parada só, ele só pinta o fundo com aquela cor — a transição precisa de 2 ou mais.
  • Cores muito diferentes em seções curtas fazem a troca parecer atrasada. Seções curtas pedem fundo próprio em cada uma, sem drift.

O que ele não faz

  • Sem caixa, vale para a página inteira (fundo do body). Para vários drifts independentes, use uma sw-drift-box para cada.
← AnteriorHero em camadas (layers) Próximo →Fixed (gruda no topo)