南町公園 その1

桜

南町公園 その2

桜

宮城地区千本桜 その1

桜

宮城地区千本桜 その2

桜

阿久沢邸 その1

桜

阿久沢邸 その2

桜

阿久沢邸 その3

桜

ぐりーんふらわー牧場 その1

桜

ぐりーんふらわー牧場 その2

桜

ぐりーんふらわー牧場 その3

桜

広瀬川 その1

桜

広瀬川 その2

桜

広瀬川 その3

桜

楽歩堂前橋公園 その1

桜

楽歩堂前橋公園 その2

桜

楽歩堂前橋公園 その3

桜

楽歩堂前橋公園 その4

桜

楽歩堂前橋公園 その5

桜

敷島公園 その1

桜

敷島公園 その2

桜

敷島公園 その3

桜

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

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

このページは縦スクロール写真めくりを試しています。
スマホの場合は上下スワイプで写真めくりができますす。
パソコンならマウスのスクロールホイールで写真めくりができます。

Tips.

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

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

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