特設ランディングページ
概要
岩手県洋野町で開催される「スパルタキャンプ」の特設ランディングページ（LP）のコーディングを担当させていただきました。
Figmaのデザインをもとに、PC・タブレット・スマートフォンで快適に閲覧できるようレスポンシブ対応で実装しています。
担当
・コーディング: HTML / CSS / JavaScript
・アニメーション: CSSトランジション、ランダムスケール＋フェード演出
制作ポイント
挑戦や熱量を感じられる演出を目指し、背景のワードクラウドやタイプライター風テキストなど、
軽やかなアニメーションをCSS＋JavaScriptで実装しました。
1. フェードインアニメーション（全体）
スクロールに応じて要素が自然に現れるよう、IntersectionObserver ではなく独自ロジックで位置を判定し、data-delay属性による個別の遅延アニメーションを実装。
コンテンツが一斉に動くのではなく、少しずつ流れるように表示されることでページ全体にリズムを生み出しています。
2. タイプライター風アニメーション
「年齢不問」「経験不問」といったテキストが一文字ずつ現れるタイプライター演出を実装。
行の幅・高さを事前に計測してレイアウトの揺れを防ぎつつ、フェードアウト後に次のメッセージが切り替わるよう設計しました。
純粋なJavaScriptのみでタイミング制御を行い、視覚的なテンポと読みやすさの両立を実現しています。
3. 背景ワードクラウドアニメーション
#free-lectures セクションでは、キーワードがランダムに点灯・拡大するワードクラウド演出を実装。
CSS変数を動的に操作してスケール・時間をランダム化し、毎回異なる動きが生まれる仕組みになっています。
また、prefers-reduced-motion に対応し、ユーザー環境に合わせてアニメーションを自動で軽減する設計です。
4. カウントダウンタイマー
フッターでは、エントリー締切までの残り時間が分かりやすいようカウントダウン表示。
リアルタイム更新により、サイト全体にイベント感を演出しています。