課題制作
デザインカンプをもとに制作した、架空の通話アプリ「OHA!」のランディングページです。スライダーやアコーディオンメニューの実装、フォームのバリデーション処理、IntersectionObserverを用いたスクロールアニメーションなど、JavaScriptによる動的表現を取り入れています。ユーザーが自然な流れでアプリダウンロードへ到達できるよう、CTAの配置や情報設計にも配慮して構築しました。
Basic認証
ID：demo PW：demo
jQueryを用いてアコーディオンを実装しています。クリック時にis-openクラスを付与し、slideUp / slideDownで開閉アニメーションを制御しました。アイコンの回転や開閉状態の管理も含め、UIの一貫性を意識しています。
Swiper.jsを使用し、spaceBetweenやloopオプションを活用して 無限ループ型のスライダーを構築。カスタムナビゲーションボタンとページネーションを連動させ、UIの一貫性を保ちました。
IntersectionObserverを使用し、要素がビューポート内に入ったタイミングでis-in-viewクラスを付与する仕組みを実装しました。アニメーション自体はCSSのtransitionで制御し、JavaScriptとスタイルの役割を分離する設計としています。
