Zum Inhalt springen
NativeCSS

Roadmap

Eine Meilenstein-Liste, verbunden durch eine einzige Linie, die sich beim Scrollen selbst nachzeichnet - komplett ohne JavaScript, per animation-timeline: view(). Kein Pinning wie bei den Stacked Cards: die Karten laufen ganz normal im Fluss, nur die Linie (und jede Karte selbst, dezent) reagiert auf die eigene Scroll-Position.

<div class="ncss-roadmap">
  <div class="ncss-roadmap-line" aria-hidden="true">
    <div class="ncss-roadmap-line-track"></div>
    <div class="ncss-roadmap-line-progress"></div>
  </div>
  <ol class="ncss-roadmap-list" role="list">
    <li class="ncss-roadmap-item">
      <span class="ncss-roadmap-dot"></span>
      <div class="ncss-roadmap-card ncss-card ncss-radius-lg ncss-border ncss-shadow-sm">
        <div class="ncss-card-body">
          <time>2024</time>
          <h3>Erste Version</h3>
        </div>
      </div>
    </li>
  </ol>
</div>

  1. Erste Version

    Tokens, Reset, Grundlayout und die ersten Kernkomponenten.

  2. Web-Awesome-Bridge

    Web Awesome und Font Awesome selbst gehostet, an die ncss-Tokens gekoppelt.

  3. Scroll-getriebene Komponenten

    Scroll-Progress, Vollbild-Sektionen und Stacked Cards - alles nativ per animation-timeline.

  4. Diese Roadmap-Komponente

    Eine selbstzeichnende Linie, die genau hier gerade vor dir entsteht.

  5. Was als Nächstes?

    Native CSS-Carousel (::scroll-marker), sobald der Support-Stand passt.

    Zurück zur Übersicht