スクロールに伴う処理の流れ

Sticky カラムの表示は「監視開始 → 可視化 → アクティブ化 → エフェクト適用」の順で進みます。ボタンで各段階をアニメーションしながら解説します。

Observer Setup

IntersectionObserver を初期化し、rootMargin と threshold を渡して監視を開始します。

is-visible の付与

ratio が 0.14 を超えた時点で is-visible を追加。カードの初回アニメーションを許可します。

is-active の切り替え

0.58 を超えたら is-active を付与し、0.4 を下回ったら解除。ヒステリシスでバタつきを防ぎます。

Effect Selection

demo-control-btn で shade / focus / minimal を切り替え、カード全体の演出を更新します。

待機中