Pular para o conteúdo principal

Introdução ALL DAY LONG: animação 3D com HTML, CSS e JS

· Leitura de um minuto

Uma breve introdução para explicar a ideia.

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

Introdução​

Esta animação é uma recriação em código do design All Day Long de Franziska Volmer. O efeito visual é uma imagem em loop que gira continuamente ao longo de um caminho em forma de pílula. O efeito não usa WebGL ou canvas, é composto inteiramente de elementos HTML, transformações CSS e a Web Animations API.

Separei a implementação em algumas postagens:

Resultado​

Confira o conceito da animação na próxima postagem.