職業訓練で実際に使っている「ハンバーガーメニュー」と「スクロール表示」のテンプレートセットです。 GSAPを使って、開閉やスクロールのアニメーションを統一しています。 ■ ハンバーガーメニュー（GSAP） ・SPはドロワー、PCは横並びに自動切替 ・開閉・アイコン（≡→×）・スムーススクロールをGSAPで統一 ・ScrollToPluginでページ内移動 ・iOS Safari対策（背景スクロールロック） ・GSAPが読めない環境でもフォールバック動作 ■ スクロール表示（GSAP ScrollTrigger） ・画面に入ったら「ふわっと」表示 ・GSAPのイージング（power2.out）で滑らかに ・グループ単位で時間差（stagger）表示 ・?debug=1 でmarkers表示 ・JSが止まっても表示は残る（真っ白事故対策） ---------------------------------------- 【こんな人に向いています】 ---------------------------------------- ・GSAPでアニメーションを統一したい ・スムーズなイージングを使いたい ・ScrollTriggerを手軽に導入したい ・自分用のMy辞書としてストックしたい ---------------------------------------- 【同梱ファイル】 ---------------------------------------- ・ハンバーガーメニュー一式（HTML/CSS/JS + README） ・スクロール表示一式（HTML/CSS/JS + デモ画像 + README） ・LICENSE.txt ・CHANGELOG.md ※ GSAP本体は同梱していません（CDNで読み込みます） ---------------------------------------- 【導入（最短）】 ---------------------------------------- 1. CSS / JS をプロジェクトへコピー 2. HTMLに指定のid / classを追加 3. GSAP / ScrollTrigger（またはScrollToPlugin）をCDNで読み込み 4. ブラウザで確認 詳細は同梱のREADMEを参照してください。 ---------------------------------------- 【対応環境】 ---------------------------------------- ・Chrome / Edge / Firefox / Safari（現行版） ・動作確認：PC（Chrome/Edge）、iOS Safari ・Android：一般的な環境では動作想定（実機未検証） ・GSAP/ScrollTriggerをCDNで読む場合、ネット接続が必要です ---------------------------------------- 【GSAPのライセンスについて】 ---------------------------------------- 本商品にGSAP本体は同梱していません。 GSAPの利用条件はGSAP側のライセンスに従ってください。 詳細：https://gsap.com/licensing/ ---------------------------------------- 【サポート】 ---------------------------------------- ・本商品はテンプレート提供です ・個別環境への組み込み代行・調整はサポート対象外です ・不具合報告（再現手順あり）は今後の更新で対応する場合があります ---------------------------------------- 【利用条件】 ---------------------------------------- ・商用利用：可 ・改変：可 ・再配布・再販売：不可 詳細は同梱のLICENSE.txtを確認してください。