January 26, 2006 9:09 AM by yuugo

ホイールマウスを使って、HTML上のIMGのSRCをパカパカ切り替えるサンプルを作りました。

http://tatamilab.jp/~yuugo/parapara/ooi/parapara.html
画像の上でマウスホイールを動かすと画像が高速に切り替わります。動いてるっぽいです。

用途

1. 道案内
• 駅から目的地までの徒歩の案内が出来そうです
2. 漫画
• 漫画を読むのは画面全体のリロードを意識することなくパラパラ読んでいきたいものです。
3. スポーツ教本
• 写真と動画の中間です。ゴルフのスイングフォームなどは、むしろコマ送りで見るのが基本でしょうからパラパラ写真で見る

経済性

従来は写真というものは高価なものでしたが、デジカメの登場により、一つあたりの写真のコストは限りなくゼロに近づきました。むしろ写真を選ぶ作業の方が高コストかも知れません。だったらとりあえず似た写真でもいいから、全部載せちゃえよと。

全部のせたはいいけど、画面は限られています。だったら超高速に切り替えることが出来ればいいじゃないかと。

ブロードバンドを必要としますが、そこは富豪プログラミングということで、機械に厳しく人に優しい設計となっております。

使い方

http://tatamilab.jp/~yuugo/parapara/ooi/parapara.htmlのHTMLソースを見れば大体わかります。

1. スクリプトにparapara.jsを組み込みます。
2. imgタグのonloadイベントに「onload="cacheTo(this,最後のファイル名)"」と入れます
3. あとはスクリプトが、
• 最初のファイル名から最後のファイル名までのキャッシュ
• ホイールイベントのアタッチ
• をやってくれます

サンプルソースなので、無保証かつ、コピーは自由です。不具合などがあればこの記事のコメント上でお願いします。

（2006.8.2追記）尾崎さんからコメントいただいた方法で、MacOSX10.4のSafariでもパラパラが動作するようになりました(10.3の方はごめんなさい)。 ありがとうございます。

tags：JavaScript  パラパラ