- 担当範囲
- 静的コーディング / Wordpress構築
- 制作期間
- 10日
- 使用言語
- HTML / CSS（Sass） / JavaScript / PHP / Wordpress
- デザインツール
- Figma
- ポイント
Point 1 各制作物のポイントを3つに絞って解説
- アニメーションは動画で掲載し、before / after の変化を直感的に確認できる構成
- 制作物の特徴を3点に整理し、短時間でも内容を把握しやすく工夫
Point 2 ScrollTriggerで時間差フェードイン
- ScrollTriggerでスクロール位置を検知し、カードにjs-showを付与してフェードインを制御
- --delay0〜2とsetTimeoutで表示に時間差をつけ、視線誘導できるカード出現演出を実装
Point 3 SplitType × GSAPによる、テキストの1文字ずつ表示アニメーション
- SplitTypeでテキストを1文字単位に分割し、GSAPで時間差（stagger）をつけて表示する演出を実装
- CSSのoverflow: hiddenとtranslateを組み合わせ、文字が下から滑らかに現れる動きを表現
全体イメージ
