フェードイン出現
画面に入った要素がふわっと下から浮かび上がる。IntersectionObserverの基本形。
プレビュー
スクロール
操作枠内をスクロールすると動きます。
仕様書
- 向く場面
- 長いページで各セクションの登場を示す
- 画面に入った要素だけを動かしたいとき
- IntersectionObserver の基本形
- 避ける場面
- ファーストビューの主要要素（初期表示が遅れる）
- ページ内の全要素への一律適用
- 構成要素
- スクロールヒント
- 出現するブロック
- 余白
- 持っている状態
- 通常
- キーボード
スクロール（キーボードは ↑↓/PageDown で可）。操作要素は無い
- 支援技術
初期 opacity 0 でも要素は DOM 上にあり、読み上げ順は不変。可視率 20% で表示に切り替わる。JS 無効時は noscript で最初から表示、reduced-motion では動かさず即表示
- 動き
出現 600ms ease、30px 上昇＋フェード。画面に入った要素だけ動かし「ここから読む」を示す
デザインの要点
- threshold 0.2 で発火する。1.0（全体が見えてから）だと下端の要素がいつまでも出ず、0 だと 1px 見えた瞬間に動いて気づかれない
- 上昇量は 30px・600ms。移動が大きいと「飛んでくる」印象になり、読み始めの位置が定まらない
- 一度 visible にしたら戻さない。スクロールを戻すたびに消えると、読み返しのたびに待たされる
- 初期 opacity 0 は JS 前提。noscript と reduced-motion では最初から表示し、内容が消える経路を作らない
コード（コピーして使えます）
<noscript><style>.reveal { opacity: 1; transform: none; }</style></noscript>
<div class="scroll-hint">↓ スクロール ↓</div>
<div class="reveal">フワッと出現 1</div>
<div class="reveal">フワッと出現 2</div>
<div class="reveal">フワッと出現 3</div>