たたみラボ

  • about
  • member
  • r&d
  • blog
  • tatamicast

blog

RSS

マウスホイールでパラパラ写真

icon 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の方はごめんなさい)。 ありがとうございます。

COMMENTS

Safariだと動かないみたいなのでfixしてみました。
http://afromania.org/~k-ozaki/tmp/parapara.js-safari.patch

もっとキレイに書けますが、分かりやすくするためにあえて
上のような形にしておきました

参考にしたのはここ
http://www.inagaki.nuie.nagoya-u.ac.jp/person/kariya/javascript.html

Safariのuser agentはこんな感じです
Mozilla/5.0 (Macintosh; U; PPC Mac OS X; ja-jp) AppleWebKit/418.8 (KHTML, like Gecko) Safari/419.3

July 20, 2006 8:33 PM by 尾崎恭一  

尾崎さんありがとうございます。

とは言うもののテスト環境がそろわずSafariロジックがまだ組み込めていません。しばしお待ちを。

August 2, 2006 5:21 PM by 山本ゆうご  

尾崎さんありがとうございました。
ようやくSafari対応できました。
しかし…MacOSX10.3.xのSafariでは残念ながら動作しませんでした。イベントがないんですかねえ…

August 3, 2006 9:48 PM by 大井宏友  

ソースを利用させて頂きました。
マウスで花を咲かせましょう♪

面白いものを公開頂き、ありがとうございました。
まずはお礼まで。

October 20, 2008 1:51 PM by だだ  

僕も、貴重なソースを利用させて頂きました。
ぱらぱら火縄銃

楽しい情報をありがとうございました。

October 23, 2008 4:09 PM by のろ君  

POST COMMENT




(書式を変更するような一部のHTMLタグを使うことができます)

必ず利用規約に同意いただいた上で送信ください。

TRACKBACKS

ページトップへ



(C) RECRUIT MEDIA COMMUNICATIONS CO., LTD.