写真は記憶を簡単かつ直感的に思い出す良い手段だ。
そこでjqueryを使って効果を加えたページを作る。
javascriptを覚えたときにそれを意味なく使う感覚に似たものがあるw
初めに画面の外側から写真が飛んでくるものを作る。
画面のサイズに合わせて表示させる枚数を決めている。
画像の奥行きに合わせて画像のサイズを変え、z-indexを設定する。
次にフラットな感じのものを作る。
画像をグリッド上に配置できるようにする。
画像のサイズは4種類あり、画像を表示する順番と時間はランダムだ。
画像を縮小して中央寄せにする方法に苦慮する。
画像が枠より小さい場合はminWidth(min-width)を指定して画像を拡大する。
画像が枠より大きい場合はmaxWidth(max-width)を指定して画像を縮小する。
これらの理由により、枠に収まる画像のサイズを計算で求めて、画像にmaxWidth、maxHeight、minWidth、minHeightを設定する。
そして中央寄せにするためにoffsetで位置も設定する。
飛ぶデザインとフラットなデザインは右上のボタンで切り替えられる。
PCで見るなら問題はないが、モバイル端末で見るとボタンは小さすぎる。
しかしviewportを設定することはできない。
なぜならば画像のサイズに影響し、表示される写真の枚数が少なくなる。
ボタンではない方法で表示を切り替える方法を模索する。
最近のブラウザーはデバイスの加速度を取得できることを思い出す。
軽くデバイスを叩いたときに表示を切り替わるようにする。
いまのところ、動いているw
2015/02/08 19:20