Pular para o conteúdo principal

ALL DAY LONG parte 3: HTML

· Leitura de um minuto

Esta postagem cobre a estrutura HTML usada para conter a animação. Diferente das partes de CSS e JavaScript, o HTML é intencionalmente mínimo. A maioria dos elementos HTML é gerada dinamicamente pelo script.

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

Detalhes​

O arquivo HTML é intencionalmente mínimo. A fita é composta de muitos fragmentos pequenos, mas esses elementos são criados dinamicamente pelo JavaScript. Isso permite que o script determine quantos fragmentos são necessários com base no comprimento do caminho e na altura do fragmento.

O elemento .wrapper centraliza a animação no viewport. O elemento .container atua como o palco 3D onde os fragmentos são posicionados.

index.html
<div class="wrapper">  <div class="container">    <!-- fragmentos são adicionados pelo o script -->  </div></div>

Resultado​

Neste estágio, a página apenas fornece um container para a animação. Os fragmentos serão criados posteriormente pelo JavaScript. A seguir, defino os estilos CSS.

index.html
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <link rel="stylesheet" href="./style.css" />    <title>All Day Long</title>  </head>  <body>    <div class="wrapper">      <div class="container">        <!-- fragmentos são adicionados pelo o script -->      </div>    </div>    <script src="./script.js"></script>  </body></html>