Pular para o conteúdo

Motion e a troca

Um gesto de assinatura, a troca, e o resto discreto: coisas chegam e assentam. Nada fica escondido sem JavaScript, e com movimento reduzido tudo já começa no estado final.

A troca

No roque, o rei anda duas casas e a torre passa por cima dele. No Roque, dois elementos trocam de lugar do mesmo jeito: um desliza em linha reta, o outro passa por cima num arco curto. É a assinatura do sistema e aparece em abas, sem/com, carrossel e na divisão de mídia e texto.

Divisão que troca

data-rq="troca" · data-troca-classe · data-troca-item · data-troca-gatilho

Aqui a troca alterna .rq-divisao--invertida. A ordem no HTML não muda, então a leitura e o foco seguem iguais.

Rei e peão sobre o tabuleiro verde

CRM

E-mail, cashback e comercial organizado para transformar compra única em recompra, no varejo e no atacado.

Quando usar
Quando duas coisas trocam de papel: antes e depois, painel e aba, foto e texto. Uma troca por vez na tela.
Acessibilidade
O gatilho é um botão com aria-pressed. Com movimento reduzido, a troca acontece sem animação.
Tokens
--rq-troca-duracao (640 ms), --rq-curva-troca, --rq-troca-arco.

Peças que trocam sozinhas

data-troca-intervalo="2400"

Sem classe, a troca muda a ordem dos dois itens no DOM. Com intervalo, troca sozinha: só quando está na tela, pausa no hover e no foco.

Rei
Torre

Pelo JavaScript

animarTroca · trocar
import { trocar, animarTroca } from './ds-roque-v1/js/roque.js';

// troca dois irmãos de lugar no DOM
await trocar(itemA, itemB);

// anima qualquer mudança de lugar feita dentro da função (FLIP)
await animarTroca([midia, texto], () => divisao.classList.toggle('rq-divisao--invertida'));

Revelar

Entradas ao rolar a página. Ponha data-revelar num invólucro, não no componente que tem transição própria. Um grupo (data-revelar-grupo) mostra os filhos em sequência, a cada 70 ms.

Subir, aparecer e linha

data-revelar · ="aparecer" · ="linha" · data-revelar-grupo

Da ideia ao pedido confirmado

  • Descobrimos
  • Desenhamos
  • Codamos
  • Revisamos
  • Publicamos

Loja no ar com suporte inicial.

Imagem na diagonal do símbolo

data-revelar="imagem"

A imagem se abre por uma borda inclinada no ângulo do símbolo da Chesslab (24,44°) e assenta de 108% para 100%. É o único lugar onde o ângulo aparece no Roque: nenhum cartão leva corte.

Cavalo claro diante de peões escuros, sobre o tabuleiro

Durações e curvas

Seis durações. Saída é a curva padrão: o elemento chega rápido e assenta devagar. Entrada é para o que sai de cena. Troca é simétrica. Mola tem um leve passo além do ponto, para o lance da troca e para confirmação. Toque num trilho para ver.

Símbolo que monta e pisca

Vem do Gambito 1.1. Ao entrar na tela o corpo aparece, a seta chega pela diagonal e o olho pisca em 240 ms. Dentro de .rq-pisca-no-hover, pisca quando o ponteiro chega num link ou botão. .rq-simbolo--sempre pisca em ciclo: serve de indicador de carregamento.

Pisca quando a ação chega perto

.rq-pisca-no-hover
Falar com a Chesslab

Movimento reduzido e sem JS

  • Sem JavaScript

    Os estados escondidos só existem com html.js. Sem JS, tudo aparece.

  • Se o JS falhar

    Um cão de guarda em CSS mostra tudo em 2,5 s, a não ser que o módulo revelar marque a página como pronta.

  • Movimento reduzido

    Nada começa escondido, transições e animações duram 1 ms, a troca acontece sem arco e o símbolo não monta.

  • Pausa

    O que corre sozinho por mais de 5 s (ticker, marquee, órbita, malha) para pelo interruptor .rq-pausa, um por página, antes das peças. O CSS lê o próprio interruptor, então ele vale também sem JS.

  • Impressão

    Os estados escondidos só valem na tela. No papel, sai tudo, até o que ainda não passou pela tela.