この感覚はなかなか面白いです。 コンテンツをあえて隠すことでユーザの興味を誘ったり、目立たなくすることで余計な機能にもたれることなく本来の目的にフォーカスさせるといったデザインをする場合があります。 良くあるのはアコーディオン系やメニューを多段化することでドリルダウンさせながら選択させるといった機能ですが、今回はまるで折りたたみ式の地図のようなUIを提供するOriDomiを紹介します。 かなり変わったUIなので見た目のインパクトが大きいです。ぴったり当てはまる使い方もきっとあるでしょう。 デモです。実際にマウスでドラッグして折り畳み幅を変更できます。 こんな感じにくしゃっとなります。 折り畳み幅は自由に設定できます。細かくするとまるでアコーディオンですね。 画像だけでなく文字も使えますのでオンマウスで色を変えたりするイフェクトも可能です。 アニメーションGIF（左）も使えます。折りたたみが変化できる面白いアニメーションGIFになります。 レスポンシブに対応していますので画面幅が狭くなればなったなりの表示に変化します。 レスポンシブに対応していることからも分かる通り、OriDomiはタッチ操作にも対応しています。使い方は以下のような形で細かくオプション設定ができます。

var folded = new OriDomi('.paper', {
  speed:           1200,  // folding duration in ms
  ripple:          2,     // backwards ripple effect when animating
  shadingIntesity: .5,    // lessen the shading effect
  perspective:     800,   // smaller values exaggerate 3D distortion
  maxAngle:        40,    // keep the user's folds within a range of -40 to 40 degrees
  shading:         'soft' // change the shading type
});

OriDomiはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 OriDomi - origami for the web dmotz/oriDomi