ITunesを初めとして、Appleの製品には幅広く利用されているユーザーインターフェイス、CoverFlow（カバーフロー）直感的かつグラフィカルなのが特徴的ですが、今回紹介する「ProtoFlow」はprototype.js＆script.aculo.usを用いてそのカバーフローを実現するという物です。

デモページ

まずはデモページをご覧ください。スライドバーでも画像をクリックでも画像を動かすことができるようになっていて、画像のキャプションも表示される見たいです。

詳しくは以下

コードは至ってシンプルで、デモページのソースは以下のようになっています。

<div id="protoflow">
<img src="imgs/DSCN0940_91360.jpg"/>
<img src="imgs/stimme_von_oben_187192.jpg"/>
<img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
<img src="imgs/farbraum_012_147508.jpg"/>
<img src="imgs/IMG_4906_199357.jpg"/>
<img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
<img src="imgs/Fries_201253.jpg"/>
<img src="imgs/Fries_201253.jpg"/>
</div>
<ul id=”protoCaptions” class=”protoCaptions”>
<li>Caption 1</li>
<li>Caption 2</li>
<li>Caption 3</li>
<li>Caption 4</li>
<li>Caption 5</li>
<li>Caption 6</li>
<li>Caption 7</li>
<li>Caption 8</li>
</ul>

実装ついて詳しくは「ProtoFlow first preview release… :: Deensoft」をご覧ください。スクリプト本体のダウンロードもこちらの「zip file」というテキストリンクか可能です。

最近は認知も高まってきて、よくカバーフローみたいなギャラリーを作りたいなんて要望もあったりします。こちらのスクリプトを使えば、使える範囲は限られれているとはいえ簡単に実現できますね。コード自体も非常にシンプルなのであまり詳しくなくても実装可能なのも魅力的ですね。

ProtoFlow first preview release… :: Deensoft