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

こういうUI/UXのエッセンスを学び取る試みは面白いですね。

Facebookが新しいアプリPaperをリリースしました。ニュース系アプリともいわれていましたが、結果としてはFacebookタイムライン表示の別な見せ方といった雰囲気になっています。

しかしそのUIにはFacebookが考えたエッセンスに溢れている訳で、そのUI/UXを真似することで得られるものがあるはずです。そこで試してみたいのがPhoto Tiltです。

Photo Tiltの使い方

Photo Tiltは全画面に一枚の写真を表示する仕組みです。以下のようなスクリプトで指定します。

var photoTilt = new PhotoTilt({
    url: 'photo.jpg',
    lowResUrl: 'lowRes.jpg', //optional it will load lowRes 1st if available
    maxTilt: 18, //optional, defaults to 20
    container: document.body  //optional, defaults to body
    reverseTilt: false //optional, defaults to false
});

Photo Tiltのデモ

デモページはこのようになります。左右に振ると表示されている場所が変わります。
デモページはこのようになります。左右に振ると表示されている場所が変わります。

まるで目の前に写真の光景が広がっているかのように視点が変わります。FacebookのPaperはスピードが速いのですが、Photo Tiltの方が自然な感じがします。

現在、カメラの性能があがって解像度が高くなったことで写真サイズが大きくなっていたり、パノラマ写真も撮れるようになっています。そんな中で写真を楽しむための見せ方も変わってきているのかも知れませんね。

Photo TiltはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

s3.jt.io/tilt/index.html

tregoning/photoTilt

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2