SWCore / Animações / Track (fileira horizontal)

Track (fileira horizontal) Animações

Uma fileira de cartões anda na HORIZONTAL conforme você rola a página verticalmente.

O que é

Transforma o scroll vertical normal da página em movimento horizontal de uma fileira de itens — efeito clássico de portfólio/galeria.

Como funciona

sw-ani-end controla a velocidade — é a % de scroll vertical necessária pra travessia inteira: número menor = anda mais rápido, maior = mais devagar (padrão: 100% por cartão).

Exemplos

A ideia — scroll vertical vira movimento horizontal Ao vivo

O visitante rola a página pra baixo, como sempre; a fileira de cartões anda pra o lado. É o efeito clássico de portfólio e de linha do tempo.

Precisa de espaço vertical de rolagem pra acontecer, então não cabe numa caixinha de exemplo — o código ao lado é o completo.

<div sw-ani="track">
  <div sw-ani-track style="display:flex; gap:2rem">
    <div sw-ani-section>cartão 1</div>
    <div sw-ani-section>cartão 2</div>
    <div sw-ani-section>cartão 3</div>
  </div>
</div>

<!-- três peças: o contêiner (track), a FILEIRA (sw-ani-track)
     e cada CARTÃO (sw-ani-section) -->
Sentido e velocidade Ao vivo

sw-ani-end é quanto scroll vertical a travessia consome: número menor = anda mais rápido, maior = mais devagar. A regra prática é dar cerca de 100% por cartão.

Com 6 cartões, algo perto de 600% costuma dar um ritmo confortável.

<!-- padrão: anda pra esquerda -->
<div sw-ani="track" sw-ani-end="400%">…</div>

<!-- invertido -->
<div sw-ani="track" sw-ani-dir="right" sw-ani-end="250%">…</div>

<!-- rápido demais cansa; lento demais parece travado -->
Portfólio — o uso real Ao vivo

Cada [sw-ani-section] costuma ser um projeto: imagem, título e uma linha de descrição. Como a fileira é um flex comum, você estiliza os cartões com as classes de sempre.

<div sw-ani="track" sw-ani-end="500%">
  <div sw-ani-track style="display:flex; gap:2rem">

    <div sw-ani-section class="bg-sur bd r-m" style="min-width:32rem">
      <img src="/projeto-1.jpg" alt="">
      <div class="p-m"><strong>Projeto 1</strong></div>
    </div>

    <div sw-ani-section class="bg-sur bd r-m" style="min-width:32rem">
      <img src="/projeto-2.jpg" alt="">
      <div class="p-m"><strong>Projeto 2</strong></div>
    </div>

  </div>
</div>

Atributos

sw-ani-dir
"right" inverte o sentido — o padrão é andar pra esquerda
sw-ani-end
% de scroll vertical pra travessia completa da fileira
sw-ani-track
na fileira (o elemento que de fato anda na horizontal)
sw-ani-section
em cada cartão dentro da fileira

Variantes

(padrão)
a fileira anda pra esquerda conforme você desce
sw-ani-dir="right"
anda pro outro lado
sw-ani-end="150%"
travessia rápida — pouco scroll percorre a fileira toda
sw-ani-end="400%"
travessia lenta — exige bastante rolagem

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

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

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

  • No celular, uma fileira horizontal longa costuma render melhor como rolagem lateral simples (.ovx com snap-x) do que como scroll sequestrado.
  • Todos os cartões ficam no DOM desde o começo: com imagens pesadas, combine com o Lazy load.
← AnteriorFixed (gruda no topo) Próximo →Sections (tela cheia)