iTunesなどで有名なカバーフローと呼ばれるUI。
サイト上にカバーフローを実装させるjQueryプラグインもあったりしますが
実装方法が面倒だったり、動きがスムーズでなかったりするのですが、
jQueryとCSS3で構成されたカバーフローUIを実装できる「jQuery UI CoverFlow 2.0 Using $.widget」が
動きも滑らかで使いやすそうだったのでメモ書き程度に紹介してみます。

jQuery UI CoverFlow 2.0 Using $.widget


jQuery UI CoverFlow 2.0 Using $.widget


デモはこちら:jQuery UI CoverFlow II | Addy Osmani

画面上のスクロールバーもしくはマウスホイールの動きで
並べられたCDジャケット(画像要素)がパタパタ流れるように切り替わります。

実装は少々複雑になってしまいそうですが、
画像要素のみならず、テキストベースのリストと連動させることもできるところもおもしろい。

画像の角度指定などはCSS3を使っていることから
IEなどCSS3非対応ブラウザでは正しく表示されません。

使いどころが限られてしまう感じもしますが
カバーフローのUIが必要になった時には
参考にすることもできそうです。

ご参考までに。。。

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

Related Posts

Trackback URL

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

SHARE

jQuery & CSS3でiTunes風のカバーフローUIを実装できる「jQuery UI CoverFlow 2.0 Using $.widget」

  • このエントリーをはてなブックマークに追加
Categories
Recent Entries
Popular Entries
Hatena Bookmark
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Feed etc...