§17-11Mobile
縦動画 viewer
縦長の動画を全画面で一本ずつ送って見る。
スマートフォンを縦に持ったまま次々と見られる。短い動画を連続して見せるフィードや、片手で眺める場面に向く。
実装のポイント
各動画を 100dvh にして scroll-snap-type: y mandatory で 1 本ずつ吸着させる。IntersectionObserver で表示中の動画だけ再生し、画面外は pause する。
- 特徴
- CSS のみ
- デモで使っているもの
- lucide-react
- matchMedia
- IntersectionObserver
- requestAnimationFrame
- SVG
- CSS scroll snap