使用スキル
ejs / Sass / jQuery / JavaScript
CSS設計手法
BEM
概要
全1ページ
架空キャンペーンのLPで、Figmaで作成されたデザインのコーディングを担当しました。
仕様書に従い、主に下記を実装しました。
・about（キャンペーンについて）の下部は、ループスライダー表示
・prizes（キャンペーン特典）の各アイコンをタップすると、詳細がモーダル表示される
・spots（おすすめスポット）はスライダー表示で左右に動かせるように
・Q&Aはアコーディオン表示
・お問い合わせフォームは入力に問題なければフレームが青色に、バリデーションエラーになると赤色に変化
仕様書にはありませんでしたが、実務を想定した実装を行うため、下記を追加実装しました。
・お問い合わせはPHP工房で実装し、必須項目の入力と、プライバシーポリシーに同意することで内容確認ボタンがアクティブになる
・内容を送信すると、自作した完了ページに遷移
・メールが正常に送信されると、確認メールが届く
・iPad、SPの場合のみ、ページトップへ戻るボタンの追従位置を、ページスクロール中とページ最下部についた時とで高さを調整
・猫の足跡がパタパタアニメになるようにして、スクロールしていくとリズムが生まれるような演出に