つつじ

つつじ

つつじ

つつじ

つつじ

つつじ

つつじ

つつじ

つつじ

つつじ

つつじ

スクロール写真めくりの事例

前橋市のつつじの名所を紹介しています。
写真は自前以外に「公益財団法人 前橋観光コンベンション協会」提供の写真を利用しています。

このページは横スクロール写真めくりを試しています。
スマホの場合は左右スワイプで写真めくりができますす。
パソコンならマウスの下の横スクロールバー、若しくは左右矢印キーで写真めくりができます。

Tips.

ページ内にスクロール スナップ以外の要素の同居で工夫が必要でした。
レスポンシブ対応で画面サイズに応じた高さの動的計算が必要でした。
Firefox用にスクロール スナップにフォーカスを与えるJavaScript「main.entry」の記述も参照。残念ながらChromium系はフォーカスを与える方法を模索中。

【ブラウザ対応状況】
IE: NG
Chrome: OK
Firefox: OK
Safari: 未検証

詳細を知りたい方はリバースエンジニアリングしてください。
参考になるおすすめサイト:表示領域にピタッと移動!CSSでスクロールスナップを実装しよう