故事

红点行动

滚动叙事：画面固定不动，文字一步步滚过去，画面跟着换。适合：讲解型文章、项目介绍、影片式页面。

第一天

客厅墙上出现了一个红点。我扑了上去，它不见了。

规律

它沿直线前进，碰到镜子就拐弯，从不停下来等我。

光

原来红点只是光。光会反射、会折射，还总比我快一步。

追踪器

于是我开始记录它去过的每一个地方，一个房间接一个房间。

两年以后

十二个房间，412 个红点，零次捕获。我依然很满意。

标记 
<div class="f-story" data-f-story>
  <div class="f-story__pin">
    <div class="f-story__stage" aria-hidden="true">
      <img src="board.jpg" alt="" data-step="0" />
      <img src="prism.jpg" alt="" data-step="1" />
    </div>
    <span class="f-story__count" aria-hidden="true">1 / 2</span>
  </div>
  <div class="f-story__steps f-prose">
    <section class="f-story__step">
      <img class="f-story__inline" src="board.jpg" alt="" loading="lazy" />
      <h2>Day one</h2>
      <p>A red dot appears on the living-room wall.</p>
    </section>
    <section class="f-story__step">…</section>
  </div>
</div>