Vision Scroll Snap
Vision
スクロールスナップ
- What :
- 創作・アート系画像を全画面表示し、スクロールスナップで切り替えるサンプル
- Why :
- scroll-snap-typeの挙動を試すフロントエンド練習として制作しました。創作・アート系の画像を全画面で見せ、スクロールで切り替えるビジュアル訴求のセクションへの応用を想定しています。
- How :
- CSSのscroll-snap-typeを用い、全画面画像がスクロールに連動して切り替わる構成にしました。JavaScriptに頼らず、ネイティブのスクロール挙動でスナップさせることで、軽量かつ滑らかな切り替えを実現しています。
技術面では Next.js / TypeScript / Tailwind CSS を採用しています。 - Role :
- Frontend Development
- Date :
- 2026.3