Observer Setup
rootMargin を -12% / -18% にして、画面外で少し手前から監視を始めます。threshold 配列は 5 段階です。
midori305 の IntersectionObserver は 0.58 / 0.4 を閾値に設定しています。スライダーで数値を変更し、可視状態とアクティブ状態の切り替わり方を観察してください。
準備完了スクロールしてカードの状態遷移を確認してください。
rootMargin を -12% / -18% にして、画面外で少し手前から監視を始めます。threshold 配列は 5 段階です。
intersectionRatio が VISIBILITY_THRESHOLD=0.14 を超えたら is-visible を付与します。これで一度表示した要素は残ります。
ACTIVE_ON を満たした瞬間に is-active クラスを加え、ACTIVE_OFF を下回ったら解除。ヒステリシスでガタつきを抑えます。
ease カーブは cubic-bezier(0.25, 0.1, 0.25, 1)。領域の浮き上がりも同じ計算式で揃えています。