南町公園 その１

南町公園 その２

宮城地区千本桜 その１

宮城地区千本桜 その２

阿久沢邸 その１

阿久沢邸 その２

阿久沢邸 その３

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

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

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

広瀬川 その１

広瀬川 その２

広瀬川 その３

楽歩堂前橋公園 その１

楽歩堂前橋公園 その２

楽歩堂前橋公園 その３

楽歩堂前橋公園 その４

楽歩堂前橋公園 その５

敷島公園 その１

敷島公園 その２

敷島公園 その３

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

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

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

Tips.

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

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

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