今日の運勢をスクラッチ!

ゆるマンガチャーミー
Responsive image

今までのチャーミー

スマホで横スクロールして画面幅2倍表示!!日本発信!?のデュアルレイアウト

2016年9月3日  ウェブデザイン

こんばんわ。
日本で人気のあるWEBデザインの情報サイトは、技術の紹介や翻訳、素材の配布などが多いように感じます。
(すごい役に立ってますがw)
そこで、日本発信のレイアウトなんか考案しちゃおう!ってことで考えてみました!!
名づけて”デュアルレイアウト”!(ババーン)
スクリーンショット 2016-09-03 1.01.27

DEMODEMODEODEMO〜!!!

スマホの狭い画面で広く、大きく内容をみせるには?の問いに答えてみました。

技術的な話ですが(飛ばしてもOK!)、flexboxを活用してwidthを200%にしてます。右の画面に移るには、leftmarginにネガティブマージンで-100%にするという荒業?を使ってます。
jqueryをつかってるんですけど、画面を横スクロールした時、表示がページの一番上に戻ってしまうのをpreventdefaltつうのでリセットしてます。
(一応スマホでフリックできます)

これで、パノラマ写真やたくさん人数のいるアイドルグループも大きく見せれるし、男女別をパターン別に変えたらパラレルにサイトを構成したり、商品画像をカタログのように見せることができますっ!
漫画のコマを縦に並べて、2人の主人公で話を進めてクロスさせたりもできますね。

コードに手を加えれば、バリエーションで3,4,なんパターンにもできるだろうし、レスポンシブにしてPCではデュアルにしない表示もできるはずです。

いろいろ夢の広がるレイアウトだと思うんですが、どうでしょうか!
(他に見たことないので日本発信と書いてますが、既にあったらごめんなさいw)

このエントリーをはてなブックマークに追加

感想、お仕事についてはこちらのお問い合わせまでお気軽にどうぞ〜!!

お問い合わせ


にほんブログ村 漫画ブログ 4コマ漫画へ
にほんブログ村