La transizione a nastro di testo

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The ticker-tape transition</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <header class="bar">
      <span class="brand">Wire</span>
      <nav class="nav" aria-label="Pages">
        <button type="button" data-go="notes" aria-current="page">Notes</button>
        <button type="button" data-go="rooms">Rooms</button>
        <button type="button" data-go="about">About</button>
      </nav>
    </header>

    <!-- three pages of a made-up sound archive; on a change every line of the page runs into one narrow tape,
         the tape scrolls past a thin head and the lines of the new page open out into their places -->
    <section class="page" data-page="notes" aria-label="Notes">
      <p class="ln ln--kicker" data-role="kicker">Field notes</p>
      <h1 class="ln ln--title" data-role="title">Listen.</h1>
      <p class="ln ln--body" data-role="body">Notes from a studio that</p>
      <p class="ln ln--body" data-role="body">records the quiet parts</p>
      <p class="ln ln--body" data-role="body">of cities at night.</p>
      <a class="ln ln--go" data-role="go" href="#rooms" data-next="rooms" data-autoclic>Hear the rooms<svg viewBox="0 0 16 12" aria-hidden="true"><path d="M1 6h13M9 1.5 14 6l-5 4.5"/></svg></a>
    </section>

    <section class="page" data-page="rooms" aria-label="Rooms">
      <p class="ln ln--kicker" data-role="kicker">Recordings</p>
      <h2 class="ln ln--title" data-role="title">Rooms.</h2>
      <p class="ln ln--body" data-role="body">Twelve rooms, one microphone,</p>
      <p class="ln ln--body" data-role="body">the hum of every ceiling</p>
      <p class="ln ln--body" data-role="body">kept exactly as it was.</p>
      <a class="ln ln--go" data-role="go" href="#about" data-next="about" data-autoclic>Who we are<svg viewBox="0 0 16 12" aria-hidden="true"><path d="M1 6h13M9 1.5 14 6l-5 4.5"/></svg></a>
    </section>

    <section class="page" data-page="about" aria-label="About">
      <p class="ln ln--kicker" data-role="kicker">About</p>
      <h2 class="ln ln--title" data-role="title">Wire.</h2>
      <p class="ln ln--body" data-role="body">A small sound archive</p>
      <p class="ln ln--body" data-role="body">kept by two people</p>
      <p class="ln ln--body" data-role="body">and one long cable.</p>
      <a class="ln ln--go" data-role="go" href="#notes" data-next="notes" data-autoclic>Back to the notes<svg viewBox="0 0 16 12" aria-hidden="true"><path d="M1 6h13M9 1.5 14 6l-5 4.5"/></svg></a>
    </section>

    <!-- the head the tape runs past: a short hairline with a tick at each end -->
    <div class="head" data-head aria-hidden="true"><span class="head__tick"></span><span class="head__tick"></span></div>

    <footer class="foot">
      <span>Wire sound archive</span>
      <span>Listening room open on weekdays</span>
    </footer>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>