景観デザインを目指せ

重山陽一郎の個人ブログ blog.enviro-studio.net
<< ほぼ全てのソフトの Snow Leopard 対応状況一覧表 | HOME | 揚げナスとミートソースのスパゲッティ & サラダ >>
AJAXで Cover Flow を作成する

Javascriptでカバーフローを作成する方法を探していたら、MediaEvent Services Blog に行き着いた。ここでAJAXでCover Flow を作成する方法が紹介されていた。
 

MediaEvent Services Blogのオリジナルのサンプルは、上のようにカバーフローの部分をクリックすると上部の大きな画像が入れ替わるという具合に出来ているのだけど、これの下の方だけを抜き出してみたのが、一番上のカバーフロー。

004 004 004

ここで紹介されいる方法では、あらかじめ各画像ごとに上のように左・中・右の3枚セットの画像を用意しておく。各画像には反射もあらかじめ着いている。準備に少々手間はかかるけど、表示の際にパソコンにかかる負荷は小さい(ような気がする(^^;))。このブログで以前に紹介したものは、表示の際に変形や反射を作成しているらしく、パソコンのファンが回り出したりしていた。

これらの画像を作成するには、Photoshopのアクションがあらかじめ用意されていて、バッチ処理でフォルダ内の画像を全部処理してくれる(1枚/秒ぐらいのスピードでどんどん処理しれくれる)。ただし、日本語のシステムでは途中で止まったりするので修正が必要だったし、画像サイズを変えたり、左右の画像に着いている枠線を無くしたり...と、色々とアクションの書き換えが必要だった。まあ、これは一度だけ苦労すれば、あとは何度でも使える。

最近、カバーフローに凝っていたのは、ホームページづくりで、1ページに多くのカバーフローを貼り付けたかったので、表示の際に「軽い」ものを探していたのだ。一応、この方法で良かろうと思って、作成してみたのがデザイン教育ワークショップのページ。今のところ3つのカバーフローが貼り付けてある。全部で10ぐらい貼るつもりなのだけど、そんなに貼ったときにどうなるか、やや心配(^^;)


↓の評価ボタンを押してランキングをチェック!
素晴らしい すごい とても良い 良い
Category:MacときどきWin
SEARCH
FEED
FEATURE ARTICLE
CATEGORIES
CALENDAR
S M T W T F S
      1
2345678
9101112131415
16171819202122
23242526272829
3031     
<< December 2018 >>
LINKS
ARCHIVES