今は動きを付けたアニメーションや変化させた色などを用いて、「画面が切り替わっている」を体現させてくれる。この演出が心地良いかどうかということは、とても意義が増してきた。
一時期はPCのスクリーンで実現させた「パララックス効果」が勢力を伸ばすかに見えたが、モバイルへの移行に伴って、別の何かが模索されているのが実状だ。
このページは「pure-css-tab」とネーミングされたものを弄ってみた。動きと色で「画面が切り替わっている」を演出する。
一時的なもであろうか。フルスクリーンで画面を切り替える方式が多く存在する。このページも同様である。
だが、レスポンシブで対応するのは、いささか効率的ではない。縦長のモバイルとちょい横長のPCで同等の内容を表示させようとすると、本ページのようにPCで閲覧できるコンテンツの幅をモバイルの幅へ近付けるしかない。
近付いた状況で、Portrait を Landscape へチェンジさせてみる。文字が溢れていないかをチェックする。
「水平方向だけに限定したスワイプ」は、画面に垂直方向へのスクロールを可能とする。
この方式が一番現実的に王道のようだ。あれもこれも取り込んで使えそうな余力が残っている。
だから、このページで学んだ効果を「水平方向だけに限定したスワイプ」へ付加して完成度を高めることこそに力を注ぐ意義があるだろう。
「水平方向だけに限定したスワイプ」は「slick」を使っている。モバイルのウェブで使える「slick」は今後ともども要注目である。
本格的にモバイルファーストによるモバイルのウェブデザインに着手してから、スクラップの在庫が凄いことになっている。リファレンスのページがモバイル用ではないことも手数がかかる要因である。
その多くは未解決なる問題点を残しているので、スクラップのフォルダの域を出ることは無い。
かくして、あれやこれや手を付けて、解決策を講ずるが打開できずにスクラップへ、という多大な時間を費やしたものが多く、クリアした一握りのページを公開しているのだ。このページは忘備録用だ。