スクロールでふわっと表示（GSAP ScrollTrigger）テンプレ v1.0.0
- Digital980 JPY
商品概要（v1.0.0） ポートフォリオでよく使う「スクロールで要素がふわっと出る」演出を、複数要素にまとめて適用できるテンプレです。 初心者がつまずきやすい「読み込み順」「GSAPが読めない時の真っ白事故」を避ける構成にしています。 できること ・複数要素（.js-reveal）を、スクロール位置に合わせて順番に表示 ・要素ごとに「移動量 / 遅延 / 時間」を data 属性で調整可能 ・OSの「動きを減らす（prefers-reduced-motion）」に配慮（アニメ無しで表示） ・GSAP / ScrollTrigger が読めない環境でも、表示は残る（真っ白にならない） ・デバッグ用に markers を出せる（?debug=1） 重要な設計方針（真っ白事故を避ける） このテンプレは、初期状態をCSSで opacity:0 にしません。 代わりに、GSAP/ScrollTrigger が使える時だけ JS で autoAlpha:0 を当ててからアニメで表示します。 そのため、GSAPが読み込めない環境でも「表示だけは残る」構成です。 ファイル構成 ・index.html（デモ） ・css/style.css ・js/js-flag.js（<html> に class="js" を付けるだけ） ・js/script.js（ScrollTriggerの処理本体） ・img/*.svg（デモ用ダミー画像） ・LICENSE.txt ・CHANGELOG.md 導入（最短） 1. 以下をプロジェクトへコピー ・css/style.css ・js/js-flag.js ・js/script.js 2. HTMLの head で読み込む（順番が重要） ・js/js-flag.js（CSSより前） ・css/style.css ・GSAP / ScrollTrigger ・js/script.js（defer必須：DOM取得のため） 読み込み例（index.html参照） <script src="js/js-flag.js"></script> <link rel="stylesheet" href="css/style.css" /> <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js" defer></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/ScrollTrigger.min.js" defer></script> <script src="js/script.js" defer></script> js/js-flag.js を CSS より前に読む理由 JSが動く環境では <html class="js"> を早い段階で付け、CSS側が「JSが動く前提のスタイル」を判断できるようにしています。 さらに GSAP/ScrollTrigger が使える時だけ gsap-ready を付け、アニメ用の状態に切り替えます。 この二段階にすることで、JSやGSAPが読めない環境でも表示が消えず、動く環境では見た目が安定します。 （js/js-flag.js は class を付けるだけの極小ファイルです） 使い方 アニメさせたい要素に class="js-reveal" を付けるだけです。 例： <div class="card js-reveal">...</div> オプション（要素ごとに調整） ・data-y="18" : 下からの移動量（px） ・data-delay="0.08" : 遅延（秒） ・data-duration="0.6" : 時間（秒） 例： <div class="card js-reveal" data-y="22" data-delay="0.12" data-duration="0.7">...</div> デバッグ URL末尾に ?debug=1 を付けると、ScrollTrigger の markers を表示します。 例：index.html?debug=1 対応環境の目安 ・現行の Chrome / Edge / Firefox / Safari を想定 ・GSAP / ScrollTrigger をCDNで読む場合、ネット接続が必要です （企業ネットワークや拡張機能でCDNがブロックされると、アニメは動きません。ただし表示は残ります） サポート範囲（原則なし） ・本商品はテンプレ提供です。個別環境への組み込み代行・個別調整は対象外です ・デモが動かない場合は、まず以下を確認してください ・GSAP / ScrollTrigger の読み込みが成功しているか（DevTools Console） ・script.js が 404 になっていないか ・class="js-reveal" が付いているか 利用条件（概要） ・商用利用：可 ・改変：可 ・自社サイト・受託制作への組み込み：可 ・再配布・再販売：不可（改変していても不可） 詳細は同梱の LICENSE.txt を確認してください。