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

コンテンツは前橋市で桜が咲く場所を紹介しています。
写真は自前以外に
「公益財団法人 前橋観光コンベンション協会」提供の写真を利用しています。
「パブリックドメイン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でこのページ相当のスクロール スナップを書いてみようかな、何時の日にか・・・。