【最大10000ポイント】当たる!!質問投稿キャンペーン!

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

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

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

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

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

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

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

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

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

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

このQ&Aに関連する最新のQ&A

A 回答 (2件)

どんな技術かの説明が足りてなかったので追記です。


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

参考URL(prototype.jsのEvent.observeの説明)
http://javascriptist.net/ref_prototype/event.obs …
    • good
    • 0

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のパスがルートからのパスになっていますので、
ローカルで確認するには相対パスなどに変更する必要がありますが。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む


人気Q&Aランキング