整屏版式

全页面板

每一个红点,都有迹可循。

每次滚动就翻到下一整页,像产品介绍页。适合:项目发布页、作品展示。

规律

碰到镜子就拐弯。

红点沿直线前进,从不停下来等你。追踪器把每一段路线都画下来。

十二个房间

一份记录。

每个房间的红点路线,都写进同一个文件。

两年以后

一束光,每一种颜色。

红点只是光。光会反射,也会散开。

开始追踪。

开源,免费,适合任何有窗台的家。

标记
<nav class="f-nav f-nav--fixed f-nav--over" aria-label="Site">…</nav>
<nav class="f-dots" aria-label="Panels"></nav>
<main class="f-panels" data-f-panels>
  <section class="f-panel f-panel--bottom">
    <video class="f-panel__media" src="loop.mp4" poster="loop-poster.jpg"
      muted loop playsinline></video>
    <button class="f-media-toggle f-panel__toggle" type="button"
      data-f-panel-toggle hidden>Pause</button>
    <div class="f-panel__copy">
      <h2 class="f-reveal">Every red dot, on the record.</h2>
    </div>
  </section>
  <section class="f-panel f-panel--split f-panel--plain">
    <img class="f-panel__side" src="board-2.jpg" alt="" />
    <div class="f-panel__copy"><h2 class="f-reveal">One record.</h2></div>
  </section>
</main>
<!-- Shapes: f-panel--bottom, --center, --stage, --split, --end; --plain uses page colors. -->