iPhoneのSafariでCover Flowを行う事ができるライブラリcss-vfxを使ってみました。
css-vfx - Project Hosting on Google Code
http://code.google.com/p/css-vfx/
実行するとこの様に動作します。
付属のサンプルではFlickr APIを使ってFlickrから画像ファイルを取得して表示していましたが実際に使用する場合は自身のサーバに有る画像ファイルを表示する事が多いと思いますのでそちらのパターンのサンプルを作成しました。
作成手順
1. 作業フォルダを作成後、ターミナルを起動。作業フォルダに移動し、以下のコマンドを実行(※事前にsvnをインストールしておく必要有り)。
svn checkout http://css-vfx.googlecode.com/svn/trunk/ css-vfx-read-only
2. examplesフォルダの中の zflow_snow.html をベースに作成。
以下の部分を変更し、
jQuery(window).load(function ()
{
flickr(function (images)
{
zflow(images, "#tray");
});
});
この様に画像ファイルの一覧を直接渡す様にしました。
jQuery(window).load(function ()
{
images = ['img01.jpg','img02.jpg','img03.jpg','img04.jpg','img05.jpg','img06.jpg','img07.jpg','img08.jpg','img09.jpg'];
zflow(images, "#tray");
});
3. img01.jpg〜img09.jpgと名前を付けた画像ファイルを同一フォルダに保存
完成品はこちらで確認できます。
こちらのライブラリ、Cover Flowに表示される順番は zflow 関数の引数に指定した順番という保証は無い様なので注意して下さい。
この点はちょっと使い勝手が悪いですが簡単にインパクトの有るサイトを作成する事が出来そうです。
なお、ライセンスがNew BSDなので自分で指定した順番で表示される様に改良して使うのも良いかもしれません。
関連サイト
css-vfxによるCover Flowの作成方法。
AboutZflow - css-vfx - How zflow is built and how to use zflow as a component. - Project Hosting on Google Code
http://code.google.com/p/css-vfx/wiki/AboutZflow
