HTML5で画像をクルクル回したい。

質問

HTML5で画像をクルクル回したい。

すみません。お手上げです。教えてください。

アップルのHTML5のサイトで、IPhoneを360度クルクル回せるサイトがあります。
http://www.apple.com/html5/showcase/threesixty/

この技術を使いたいと思い、firebugなどでソースを見てるのですが、
どうやっているのかわかりません。

javaScriptを呼び出して、表示する画像を次々と変えているようなのですが、
それって、ＨＴＭＬ５の技術なのでしょうか。

ＨＴＭＬ５のcanvasなどの最新技術を使っていると思っていたのですが、
どんな方法で回しているのかがわかりません。

一応ＨＴＭＬ５のサンプルページなので、
最新技術を使っていると思っているのですが・・・・・。
ただjavaSvriptで処理しているだけなのでしょうか。

ソースなどは自分で調べますので、
そんな技術を使っているかだけでも教えて教えていただけると
助かります。

すみません。困っています。
ご存知の方、どなたか教えてください。

よろしくお願いいたします。

回答No.2

kuzumiHK · ベストアンサー

どんな技術かの説明が足りてなかったので追記です。
まず、threesixty.jsに記述した画像パスと画像枚数を
vr.js内にある関数AC.VRに渡します。
渡した後、vr.js内でprototype.jsのEvent.observeなどを利用して、
マウスイベントが起こったら、
現在の画像からどのくらい数値を移動させるかなどを計算して、
その数値を画像パスの##に入れたものを画面上に常時反映しているようです。

参考URL（prototype.jsのEvent.observeの説明）
http://javascriptist.net/ref_prototype/event.observe.html

回答No.1

kuzumiHK

javascriptで処理しているだけです。
ただし、html5で規定されたメソッド(getElementsByClassNameなど)などを使用しているため、
html5対応ブラウザで動作することを前提にした作りのようです。
回転する画像部分にはCSSの指定は特に影響していません。

360度回転させるスクリプトを最低限動作させているのは以下のファイルです。
※JS・CSS・画像ファイルなどの使用許諾につきましては各ファイルのルールに従ってください。

/safaridemos/showcase/threesixty/index.html
/safaridemos/showcase/global_html5/scripts/lib/prototype.js
/safaridemos/showcase/global_html5/scripts/browserdetect.js
/safaridemos/showcase/global_html5/scripts/vr.js
/safaridemos/showcase/threesixty/scripts/threesixty.js
/safaridemos/showcase/threesixty/images/optimized/
Seq_v04_640x378_01.jpg～Seq_v04_640x378_72.jpg（72画像）

どこかで見たことのあるJSとオリジナルの組み合わせですね。
index.htmlとthreesixty.jsのパスがルートからのパスになっていますので、
ローカルで確認するには相対パスなどに変更する必要がありますが。