002_stagger

フェードインの応用で、グループ内の子要素を 少しずつ遅らせて順番に 出現させる実装です。各要素に遅延値を手書きする代わりに、 親要素に属性を付けるだけで、子要素の遅延を JS が連番計算して自動配分します。 グループ全体がビューポートに入ったタイミングを検知し、子を 0ms・step・step×2… と時間差で表示します。一度表示したら監視は解除します（ワンショット表示）。 OS の「視差効果を減らす」設定が有効な場合は、アニメーションを無効化して即時表示します。

既定ステップで順番に出るカード一覧

  • 1

    親の data-stagger だけで、配下の子が順番に出現します。 この 1 番目は遅延なし（0ms）で表示されます。

  • 2

    2 番目は既定ステップ分（120ms）遅れて出現します。 子に遅延値を書かなくても、JS が連番で配ります。

  • 3

    3 番目はさらに遅れて（240ms）出現。要素を増やすだけで 連続感のある演出になります。

  • 4

    4 番目（360ms）。遅延の増分は data-stagger-step で まとめて調整でき、子側の修正は不要です。

ステップを広げて左から流すリスト

  • 1

    data-stagger-step="250" で遅延差を広げると、 1 枚ずつ流れるような「間（ま）」のある演出になります。

  • 2

    方向は親の data-fade-direction="left" で グループ全体にまとめて指定。左からのスライドインに切り替わります。

  • 3

    ステップと方向はグループ単位で変えられるため、同じ仕組みで テンポも見た目も作り分けられます。

グリッドで順次フェードするカード

カード A

data-fade-direction="none" は位置を動かさず opacity だけで現れる純フェード。順次の「間」だけで魅せます。

カード B

グリッドでも仕組みは同じ。DOM の並び順に沿って 0 / 90 / 180… ms と 遅延が増えていきます。

カード C

ステップ 90ms と短めにすると、テンポよく畳みかけるように出現します。

カード D

一度表示したら監視を解除するため、上下に何度スクロールしても 再アニメーションはしません（ワンショット表示）。