自主コーディング課題で制作した、表参道風カフェのLPです。デザインカンプを基にコーディングを行い、GSAPでアニメーションを実装しました。

概要

一部デザインカンプの整合性を調整しています。
全ページにわたりレスポンシブコーディングを行い、一部リキッドレイアウトを取り入れています。
またJavaScriptを用いた様々な処理を実装しました。

こだわったポイント

• 細部にこだわったおしゃれなデザインをコーディングで再現
• GSAPによる豊富なスクロール連動アニメーション（特にメインビジュアルの文字表示に力を入れました）
• SEO対策の一環として文脈に沿った適切なHTML要素を使用
• 画像の軽量化・レイアウトシフト対策実施
• お問い合わせセクションにモーダル実装（HTML,/CSSのみで動作）
• 最下部までスクロールでトップへ戻るボタンはフッター固定