Cafe Palette
架空のカフェ「Cafe Palette（カフェ パレット）」の季節限定メニューを紹介する特設サイトです。
「移りゆく季節の中で、変わらない一杯の温もりを。」をコンセプトに、朝の入店から春夏秋冬の移ろい、そして夜の退店までを1つの繋がったスクロールストーリーとして体験できるインタラクティブなWebサイトとして制作しました。
開発環境には Vite を採用し、FLOCSS に基づいたSCSS設計と ES Modules による機能単位のJavaScript分割を行っています。アニメーション実装には GSAP（ScrollTrigger / ScrollToPlugin / MorphSVGPlugin / DrawSVGPlugin）と HTML5 Canvas を組み合わせ、PC表示時は横スクロール、SP表示時は縦スクロールへとシームレスに切り替わるレスポンシブな演出を構築しています。
- POINT
-
・入店から退店まで「時間の流れと四季の移ろい」を体験できるストーリー演出
ただセクションを並べるのではなく、「昼間のカフェに入店し、店内で春・夏・秋・冬の限定メニューを楽しみ、夜になって雪の降る外へと退店する」という一連のストーリーを体験できるよう設計しました。季節ごとに背景色・舞い散るパーティクル・店内のクッション色・棚の雑貨・黒板のチョークアートが切り替わるほか、壁掛け時計の針が開店（10:00）から閉店（19:00）へと進み、退店時には外観が「夜の冬モード（窓の照明や雪だるま、雪道）」へと変化する細部の演出にこだわりました。
・横スクロール（containerAnimation）環境下での疑似固定（逆スクロール）ロジック
PCの横スクロール中は、GSAPの仕様上、内部要素に対して標準の pin: true を使用することができません。そのため、全体のスクロール距離と各トリガー区間の比率から「要素を画面内に留めるために必要な逆方向の移動量（px）」を算出するユーティリティ関数（getReverseScrollAmount）を実装し、トラックが左へ動く分だけ対象要素を右へ移動させることで、横スクロール内での自然な画面固定を実現しました。
・リフレッシュレート非依存＆高解像度（Retina）対応のCanvasパーティクルエンジン
背景で舞う桜・泡・落ち葉・粉雪・夜空の星は、オブジェクト指向（クラス設計）で実装したCanvasエンジンで描画しています。window.devicePixelRatio に合わせたスケーリングでスマホ等の高解像度画面でもボヤけない描画を保ちつつ、フレーム間の経過時間（deltaTime）を基に移動量や瞬きを計算することで、60Hz・120Hzなど異なるリフレッシュレートのモニター間でも同じ速度でアニメーションが再生されるよう制御しています。
・HandlebarsによるSVGの分割管理と、CSS変数を活用したスマートなUI構築
アニメーション制御のために多数のクラスやパスを持つインラインSVGを src/svg/ 配下に分割し、ビルド時に vite-plugin-handlebars で結合する構成としました。また、壁掛け時計の文字盤配置やSPメニューの円形展開（clip-path）にはCSSカスタムプロパティ（CSS変数）を活用し、JavaScriptとCSSの役割分担を明確にしています。 - ページ数
- 1 ページ
- 使用技術
- GSAP / JavaScript / HTML/CSS
- デザイン
- Figmaページ（閲覧のみ可能です）