Pular para o conteúdo principal

ALL DAY LONG parte 1: conceito

· Leitura de um minuto

Implementando a animação.

ALL DAY LONG (série de 7 partes)
  1. Introdução
  2. Conceito
  3. Imagens
  4. HTML
  5. CSS
  6. JS
  7. Conclusão

Conceito​

Em resumo, a animação é composta pelos seguintes elementos:

  • Em cinza, o .container, o contexto 3D raiz. É estático, rotacionado nos eixos X, Y e Z, para que apareça inclinado em perspectiva.
  • Em vermelho, o .fragment-wrapper, filho de .container. É animado, move-se de cima para baixo, girando em cada borda.
  • Em verde, o .fragment, filho de .fragment-wrapper. É estático, movido ao longo do eixo Z, acima de .fragment-wrapper.
  • Em azul, o .fragment::after, filho de .fragment. É estático, rotacionado no eixo Y, ficando atrás de .fragment.

O movimento da animação segue uma geometria de estádio.


Na animação final, apenas os elementos .fragment e seus pseudo-elementos .fragment::after são visíveis. Muitos deles são usados para formar uma fita completa. Cada .fragment e .fragment::after têm uma fatia das imagens front.png e back.png, respectivamente.

Resultado​

Confira a criação das imagens na próxima postagem.