透けて見える！Intersection Observer v2 で可視性検知

Intersection Observer v2 は、オリジナルの API に trackVisibility と delay オプション、さらにエントリの isVisible プロパティを追加します。これにより、要素がビューポートに入ったか出たかだけでなく、実際にユーザーから見えているかどうか（CSS の opacity や透明オーバーレイなどで隠されていないか）も検出できます。

このデモでは、6枚のカードに異なる可視性シナリオを用意しています。「covered (隠れている)」と表示されたカードは上に半透明のオーバーレイ (::after 疑似要素) があり、「faded (薄くなっている)」のカードは opacity: 0.3 以下に設定されています。オブザーバーが交差と可視性の両方を追跡し、各カードのバッジとインジケーターの色が変化します。

注意: trackVisibility: true と正の delay (例: 100ms) が v2 機能には必須です。ブラウザサポートは現在 Chromium ベースのブラウザに限られます。