001_fade-in

Intersection Observer で、要素がビューポートに入ったタイミングを検知し、 opacity と transform: translateY() を組み合わせてふわっと出現させる基本実装です。各要素は一度表示したら監視を解除します。 OS の「視差効果を減らす」設定が有効な場合は、アニメーションを無効化して即時表示します。

スクロールで出現するカード

ビューポートに 15% 入った時点で .is-visible が付与され、透明＋少し下にずれた状態から、本来の位置へフェードインします。

通常通り表示されるカード

遅延なし。3 枚とも同じ上方向のフェードインなので、 data-fade-delay による出現タイミングの差だけを見比べられます。

少し遅れて表示されるカード

data-fade-delay="150" で、表示開始を 150ms 遅らせています。隣のカードよりわずかに後から出現します。

さらに遅れて表示されるカード

data-fade-delay="300" でさらに遅延。属性に数値を振り分けるだけで、連続感のある演出にできます（連番遅延を自動で配る応用は別パターンで扱います）。

左からスライドインするカード

data-fade-direction="left" で、左方向からのスライドインに切り替わります。方向は属性だけで指定でき、JS の変更は不要です。

右からスライドインするカード

出現方向を要素ごとに変えても、監視ロジックは共通のままです。レイアウトやデザインに合わせて方向だけを差し替えられます。

動きなしで純粋にフェードするカード

data-fade-direction="none" は transform を使わず、 opacity だけでふわっと現れる純フェードです。位置の移動を伴いません。一度表示したら監視を解除するため、上下に何度スクロールしても再アニメーションはしません（ワンショット表示）。