ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Paperfold CSSは中間のメッセージを折り畳んで表示し、クリックで開く3Dアクションを施すJavaScriptライブラリです。

これはアイディアの勝利!Paperfold CSSを使うと折り畳んだメッセージを開いて表示したりする際に効果的に見せられるようになりそうです。


デフォルトの表示です。See 5 More Postsという表示があります。そこをクリックします。


徐々に開いていきます。


折り畳まれた部分が開いて表示されました。


デモ動画です。折りたたみの量などは自由に設定できます。しかも3Dであり、マウスで回転させたり見る向きを変更できたりします。

Paperfold CSSはGmailの多数のリプライが重なった時のメッセージ群を表示する際のやり方に近いです。面白い使い方が出来そうです。

Paperfold CSSはJavaScript製のオープンソース・ソフトウェア(Public Domain)です。


MOONGIFTはこう見る

掲示板などでコメントが多い場合にどう表示するかは常に問題になります。最初の10件を出して、ページネーションを使うのが良いのか、Gmail風に最後のメッセージだけ出して残りはクリックで表示するのが良いのかと言った具合です。どちらも利点があります。2ちゃんねるでは最近の50件がデフォルトの表示です。

有名なサービスでは大抵直近のデータだけを出して、残りはクリックで表示するというやり方が一般的になっています。情報は時間とともに廃れていくので、古いデータをいつまでも表示しておくのは意味がないのかも知れません。そうした情報の廃れが早いと考えられる場合にはPaperfoldを使った表示が便利そうです。

via Create Folded Paper Effect in JavaScript and CSS3 | Web Resources | WebAppers

デモ:Paperfold CSS | Demo Studio | Mozilla Developer Network

Paperfold CSS

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2