loading
Loading photos
 
前橋市
さくらが咲く風景

 

南町公園 その1

桜

南町公園 その2

桜

宮城地区千本桜 その1

桜

宮城地区千本桜 その2

桜

阿久沢邸 その1

桜

阿久沢邸 その2

桜

阿久沢邸 その3

桜

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

桜

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

桜

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

桜

広瀬川 その1

桜

広瀬川 その2

桜

広瀬川 その3

桜

楽歩堂前橋公園 その1

桜

楽歩堂前橋公園 その2

桜

楽歩堂前橋公園 その3

桜

楽歩堂前橋公園 その4

桜

楽歩堂前橋公園 その5

桜

敷島公園 その1

桜

敷島公園 その2

桜

敷島公園 その3

桜

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

コンテンツは前橋市で桜が咲く場所を紹介しています。
写真は自前以外に
公益財団法人 前橋観光コンベンション協会」提供の写真を利用しています。
パブリックドメインQ」のイラストを利用しています。

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

Tips.

ユーザー体験の完成度を高めるのに意外に手間がかかる事がわかりました。
ページ内にスクロール スナップ以外の要素の同居は工夫が必要です。
ウィンドウ・サイズに応じて写真表示が収まるように、写真表示サイズを動的計算する必要がありました。
Firefox用にスクロール スナップにフォーカスを与えるJavaScript「main.entry」の記述も参照。残念ながらChromium系はフォーカスを与える方法を模索中。
chromium系とMozilla系のユーザー体験の動作が違う。Webkit系は未検証なので不明。そうゆう物だと割り切って利用するしかなさそう。ここらへんが納得できないのなら、ページ内のアンカーリンクを利用して、JavaScriptで実現したほうが懸命です。

ウェブフォント

トップの「前橋市」の部分のフォントはGoogle提供のフォントを利用しています。
ウェブフォントも利用文字限定での読み込みなら重くなりません。
詳細はフォントを読み込んでいるlinkタグの部分を見てください。

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

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

結論:スクロール スナップはいまいち

Styleの“scroll-snap-type:”と“scroll-snap-align:”を用いたスクロール スナップは完成度の高いページ作成には向かないと判断しました。
その理由は
・スクロールナビを設ける方法が無い?
  └→ページの一部にスクロール スナップを設ける場合は必須。
・chromium系とMozilla系の動作に違いがある
  └→あとWebkitという難敵も居る。
・ページオープンでchromium系はコンテンツにフォーカスを当てる方法が無い
  └→ページオープン後に即PgUpとPgDnまたはスペースキーでページ捲りがしたい。
もし、Styleレベルでこれらに不便さが解消できないのなら、Styleとしての実装に中途半端感を感じます。
いずれも、ここの落書き人が解決方法を知らないだけでかもしれません。(^_^;)
ご存知に方がおりましたらご伝授ください。よろしくお願いいたします。
後ほど、JavaScriptでこのページ相当のスクロール スナップを書いてみようかな、何時の日にか・・・。