Simplicityを少し改造してみた part17 あのフリップでスペースの有効活用ふたたび

ネタが無いとかそういうんじゃないんですよ。
ネタがないのなんかはいつものことです。ただ、今ならもう少し何とかできそうな気が…そう、気がしただけなんです。

Simplicityを利用するようになってからしばらくして、縦に伸びていく画面を何とかしたいと考えて、メインをフリップ(トランプをめくるみたいに回転)させて、その裏側に何かしら入れたら縦が短くなるじゃんと言うことで、以前記事を書いたんですが、色々とあって手付かずで放置してました。

で、まだ実戦向きには書いてないんですが、これまでのいくつかのTipsも加えながらもう一度やってみようということで書いた次第であります。

以前の記事は、以下のブログカード

Simplicityを少し改造してみた 番外編3 スペースの有効利用のアイデアみたいなの
PC画面だけを想定しての話です。モバイルだとこの手法よりも左右にスワイプさせた方がいいだろうと思うのですが、デザイン次第だとできなくもないの...
Simplicityを少し改造してみた 番外編3-2 スペースの有効利用のアイデアみたいなのの続き
いやぁ、これはなかなか大変でした。思ったようには動かないもので、現在もまだfooterが画面上部に行ってしまうという状態になっていますが、先...
Simplicityを少し改造してみた 番外編3-3 スペースの有効利用のアイデアみたいなのの続き2
まだ完全に出来上がっているわけではないんですが、経過報告と新規に追加した内容で書いてみようと思います。 色々考えながら現在まで思いつく方法...

まぁこれらブログカードは見なくても良いです。こんなことをしてました程度の話なのです。

2016/06/01 現在のサンプル

See the Pen フリップによるスペースの有効活用 by Hidekichi (@Hidekichi) on CodePen.

動作のきっかけ(トリガー)は#mainの記事部分をクリックすると裏側が出てきて、そこに関連記事を表示するというものです。で、関連記事部分(リンク以外)をクリックすると、元に戻ると言うものですが、実は以前のスクロール位置を覚えていて、フロント(通常の記事側)をクリックしたポイントまで自動スクロールするんです。フロント側をクリックしてバック側(関連記事側)が表示される時は、バックの一番上までスクロールします。

まぁ前の記事でも同じようなことをしていたんですが、今回はクラウドさんが無い分、若干スムーズです。#mainを回転させるトリガーは現在#mainとしていますが、これはまた別途スイッチを用意するかも知れません。

スクロール位置を記録していることで、記事を読んでる途中で裏返っても、すぐに戻れるという設計になっております。

仕組みの説明 -jQuery-

最初に、#mainに対して.frontと言うクラスを入れます。次に、#mainの後に.backと言うブロックを作り、今回は関連記事(#related-entries)を一旦削除してクローンし、.backに挿入しています。
次に、これら.frontと.backを.flipperと言うブロックで囲みます。

ちなみに、まだレスポンシブ対応してませんのでPC表示、あるいはタブレットもイケるかな?程度の出来具合です。

で、.frontか.backをクリックすると.flipperに.flipと言うクラスが付くようになっています。.flipがついたり外れたりで回転しているということです。

スクロール部分に関して

これは、最近色々と入れるようになったわけですが、ユーザーエージェントでwebkitかそれ以外かを判断して、ターゲットを変更しています。

こういう仕組みでスクロールしてまして、ターゲット部分は、$(“body,html”)とよく説明されていますが、前述したように、ブラウザの種類で本来、bodyかhtmlどちらかで良いので、選択しているという感じです。

移動するポジションが、座標かセレクタかをjQueryの$.isNumericで調べています。#なんちゃらのように、数値以外が入ったらそのoffsetを調べて座標を割り出し、数値が入っていたらそのままそこまでというようなことをしています。

仕組みの説明 -css-

jQueryで以下のような構造にしています。

.frontと.backが格納される.flipperは、position: relativeにしています。これは中身の.front, .backをposition:absoluteにした時に、どこかに中身が飛んでいってしまわないようにするためです。

.frontと.backには、backface-visibility: hidden;と入れています。通常ひっくり返った時に、ここをhiddenにしておかないと内容が鏡像反転して表示されます。それぞれひっくり返った時に裏には何もないというような状態にするためのものです。

で、.frontはtransform: rotateY(0);を入れて通常表示しておき、.backはtransform: rotateY(180deg);として反転している状態で表示させます。これらがposition: absoluteで、top:0, left:0に配置されるので、重なって位置することになります。

jQueryで.flipperに.flipと言うクラスがつくと、.flipperはtransform: rotateY(180deg)でひっくり返ります。ひっくり返れば.frontは裏向きになり非表示、.backは非表示だったものが表向きになるので表示されるという具合です。

これらが一連の仕組みです。ややこしいと言えばそうですが、表裏のカードが配置された親要素をY軸回転させているだけなので、仕組みはややこしいですが、やってることは簡単なことです。

これらを活用するとどういうことができるか

前に書いた記事にも少し触れた部分ですが、今回は関連記事を背面に入れました。これは関連記事の部分が長くなって記事とコメントまでの距離が離れてしまうのを何とかしようとした試みです。
もう少し、例の知事にも習って精査しないといけませんが、例えばwikiなどにはフットノートというのがあります。いわゆる注釈(脚注)です。そういったものをウラ面にまとめて、クリックすると裏返ってその説明を読み、またクリックすると表面に戻って続きを読むと言うことが出来たりするのではなかろうかというアイデアもあります。
これらはこういったギミックを入れずともTooltipなどで表示すればよいだけの話なんですが、まぁ見た目に派手なのが好きな人もいるので(笑)

場合によってはサイドバーの中身を入れても良いかと思います。メニューを入れてもよいでしょう。以前はコメントエリアを入れるサンプルも作ったような記憶があります。

こういったものは他にも、タブメニューなんかに近い使い方とは思いますが、色々と利用方法が考えられます。スマホなどでは縦に長くなりがちなので逆に使いにくいかも知れません。しかし理屈がわかれば一部を回転させるということができるために下1/3を別のブロックにして、そこを回転させてメニューであったり、関連する何かしらを表示ということも出来たりも。

いろいろ使えるはずですが、具体的にこう使うのがベストという使い道がいまいちわからないのが玉に瑕ですけれども、もうしばらく色々と考えてみたいと思います。

スポンサーリンク

シェアする

フォローする