シンプルな見出し
最初に表示されるカードです。遅延を付けず、基本的なフェードイン挙動を確認できます。
Scroll Animation
スクロールに連動したフェードイン
data-fadein 属性を付与した要素は IntersectionObserver で監視され、ビューポートに入ったタイミングで is-show クラスが付与されます。遅延値をミリ秒で指定すると、PC ビューで段階的に表示させることができます。
使い方
data-fadein属性を付与（値なしの場合は遅延 0ms）。- 遅延を付けたい場合は
data-fadein=\"200\"のようにミリ秒を記述。 - SCSS 側で定義済みの遅延値以外を使いたい場合は
_data-fadein.scssに追記。
200ms 遅延
data-fadein="200" を指定すると、PC ビューポートでは 200ms の遅延が付きます。
400ms 遅延
カードを縦に並べた際にも順番にアニメーションが発火します。
600ms 遅延
最大 600ms のサンプル。必要に応じて SCSS のループに値を追加可能です。
補足
prefers-reduced-motion が reduce の環境では自動的にアニメーションが無効化され、即時表示されるように設計しています。必要に応じて CSS を編集し、上下方向以外の動きやアルファ値の変化を追加できます。