Skip to main content

ALL DAY LONG part 3: HTML

· 2 min read

This post covers the HTML structure used to host the animation. Unlike the CSS and JavaScript parts, the HTML is intentionally minimal. Most of the DOM elements are generated dynamically by the script.

ALL DAY LONG (7 part series)
  1. Introduction
  2. Concept
  3. Images
  4. HTML
  5. CSS
  6. JS
  7. Conclusion

Details​

The HTML file is intentionally minimal. The ribbon is composed of many small fragments, but those elements are created dynamically by JavaScript. This allows the script to determine how many fragments are needed based on the path length and the fragment height.

The .wrapper element centers the animation in the viewport. The .container element acts as the 3D stage where fragments are placed.

index.html
<div class="wrapper">  <div class="container">    <!-- fragments are added by the script -->  </div></div>

Result​

At this stage the page only provides a container for the animation. The fragments themselves will be created later by JavaScript. Next, I define the visual and 3D rules in 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">        <!-- fragments are added by the script -->      </div>    </div>    <script src="./script.js"></script>  </body></html>