【商品概要】 スクロールで要素がふわっと表示されるテンプレです。 IntersectionObserver（バニラJS）なので外部ライブラリ不要で導入できます。 【できること】 ・複数要素を自動で監視して、交差したら表示 ・グループ単位で連続表示（stagger）にも対応 ・1要素ごとに、移動量・遅延・時間を調整可能 ・端末の「視差効果を減らす（prefers-reduced-motion）」にも配慮 【特徴（大事な設計）】 初期状態は「見える」が標準です。 JSが読み込めない環境でも真っ白になりにくい設計にしています（授業用・配布用でも事故が起きにくい）。 【向いている人】 ・GSAPなしでスクロール表示を入れたい ・学校PCや社内PCなど、CDNや外部ライブラリが使いにくい環境がある ・まずは軽く入れて、必要なら調整だけしたい ・自分のMy辞書としてストックしておきたい 【収録物】 ・サンプル一式（HTML / CSS / JS） ・README（最短手順、調整方法、注意点） 【使い方（最短）】 ・HTMLで表示させたい要素に class="js-reveal" を付ける ・CSSとJSを読み込む ・ブラウザで確認（スクロールすると表示） 【調整（data属性で上書き）】 ・要素ごと：data-y / data-delay / data-duration ・グループ（親）ごと：data-stagger / data-once / data-root-margin / data-threshold ・コーディング初心者でも、数値を変えるだけで見た目を調整できます。 【動作環境】 ・IntersectionObserver対応ブラウザで動作します ・古いブラウザまで広く対応したい場合はポリフィル等が必要です（このテンプレには同梱していません） 【注意】 ファーストビュー（最初から画面内にある要素）に多用すると、環境によって一瞬見えてから隠れるように見える場合があります。安全運用のコツはREADMEに記載しています。 【利用範囲】 ・ご自身の制作物（ポートフォリオ／案件／社内サイト／授業資料など）に組み込みOK ・再配布・転売（コードの転載は禁止）は不可