UIパーツ Vanillaセット｜ハンバーガーメニュー＋スクロール表示（外部ライブラリ不要）

職業訓練で実際に使っている「ハンバーガーメニュー」と「スクロール表示」のテンプレートセットです。

外部ライブラリ不要（Vanilla JS）なので、学校PCや社内PCでもそのまま使えます。

■ ハンバーガーメニュー

・SPはドロワー、PCは横並びに自動切替

・Escキーで閉じる

・iOS Safari対策（背景スクロールロック）

・アクセシビリティ対応（aria属性、tabindex制御）

・prefers-reduced-motion配慮

■ スクロール表示（IntersectionObserver）

・画面に入ったら「ふわっと」表示

・グループ単位で時間差（stagger）表示

・data属性で調整可能（移動量、遅延、速度）

・JSが止まっても表示は残る（真っ白事故対策）

----------------------------------------

【こんな人に向いています】

----------------------------------------

・GSAPなしで軽く実装したい

・学校PC、社内PCでCDNが使いにくい

・コピペで動くテンプレが欲しい

・自分用のMy辞書としてストックしたい

----------------------------------------

【同梱ファイル】

----------------------------------------

・ハンバーガーメニュー一式（HTML/CSS/JS + README）

・スクロール表示一式（HTML/CSS/JS + デモ画像 + README）

・LICENSE.txt

・CHANGELOG.md

----------------------------------------

【導入（最短）】

----------------------------------------

1. CSS / JS をプロジェクトへコピー

2. HTMLに指定のid / classを追加

3. ブラウザで確認

詳細は同梱のREADMEを参照してください。

----------------------------------------

【対応環境】

----------------------------------------

・Chrome / Edge / Firefox / Safari（現行版）

・動作確認：PC（Chrome/Edge）、iOS Safari

・Android：一般的な環境では動作想定（実機未検証）

----------------------------------------

【サポート】

----------------------------------------

・本商品はテンプレート提供です

・個別環境への組み込み代行・調整はサポート対象外です

・不具合報告（再現手順あり）は今後の更新で対応する場合があります

----------------------------------------

【利用条件】

----------------------------------------

・商用利用：可

・改変：可

・再配布・再販売：不可

詳細は同梱のLICENSE.txtを確認してください。