HTML5で画像をクルクル回したい。
すみません。お手上げです。教えてください。
アップルのHTML5のサイトで、IPhoneを360度クルクル回せるサイトがあります。
http://www.apple.com/html5/showcase/threesixty/
この技術を使いたいと思い、firebugなどでソースを見てるのですが、
どうやっているのかわかりません。
javaScriptを呼び出して、表示する画像を次々と変えているようなのですが、
それって、HTML5の技術なのでしょうか。
HTML5のcanvasなどの最新技術を使っていると思っていたのですが、
どんな方法で回しているのかがわかりません。
一応HTML5のサンプルページなので、
最新技術を使っていると思っているのですが・・・・・。
ただjavaSvriptで処理しているだけなのでしょうか。
ソースなどは自分で調べますので、
そんな技術を使っているかだけでも教えて教えていただけると
助かります。
すみません。困っています。
ご存知の方、どなたか教えてください。
よろしくお願いいたします。
No.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 …
No.1
- 回答日時:
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のパスがルートからのパスになっていますので、
ローカルで確認するには相対パスなどに変更する必要がありますが。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Instagram HTML5の廃止とJavaScript 2 2022/04/13 21:05
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- 写真 写真(画像)編集スキルを質問する時 1 2022/12/07 14:14
- その他(自然科学) 科学技術計算の仕事について 2 2023/02/04 18:09
- HTML・CSS 私の能力からして間違っていないような気がします。 4 2022/09/30 13:24
- ヤフオク! ヤフオクで画像のアップロードが出来なくなりました 2 2022/06/07 09:48
- その他(IT・Webサービス) Chromeとかにしか対応していないウェブサイトに抗議したい いま令和5年だぞ 今使えるブラウザとい 5 2023/05/24 11:32
- ホームページ作成・プログラミング アニメ公式サイト風なWebページを作りたいです。 無料のテンプレートはありますか? 2 2022/04/02 11:33
- 医療事務・調剤薬局事務 どちらの薬局の方が安いか、判定お願いします 1 2022/09/22 17:26
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
VBScriptでHTMLを生成しJPG画像...
-
thview.jsを使って360度パノラ...
-
すぐムラムラするのを抑えたい2...
-
セキュリティ証明書エラーの解...
-
bingで、マイナス検索ってでき...
-
excelでマクロを用いた検索エン...
-
グーグル検索の「0.21秒」って...
-
google先生とは?
-
クロスコールディスクとは?
-
VB.NET DataGridView 縦スクロ...
-
ニコ生コメントビューアーでの...
-
韓国語らしいホームページを日...
-
キーワード検索だけでアクセス...
-
YouTube 日本支社は存在するの...
-
簡単ホームページで足跡を残さ...
-
見られなくなったHP
-
Outlookのメール検索が突然出来...
-
インターネットの履歴はどこの...
-
SSL対応なのにhttp://で入力し...
-
iPhone Safariでの検索結果で日...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HPレイアウトが同じページのヘ...
-
画像を差し替えたはずなのに変...
-
リンクボタンを3種類に変化させ...
-
FC2ホームページでアップロード...
-
画像が表示されなくなった
-
IEの”ソースの表示”の無効化
-
スライドショーが動かなくなり...
-
HTMLはあっているのに違う画像...
-
ホームページ・ビルダー 背景画...
-
アップロードした画像が見えない
-
jimdoの独自レイアウトについて
-
faviconが表示されません
-
thview.jsを使って360度パノラ...
-
HP管理画面の作り方
-
すぐムラムラするのを抑えたい2...
-
緊急 XVIDEOSを久しぶりに検索...
-
グーグル検索の「0.21秒」って...
-
bingで、マイナス検索ってでき...
-
VB.NET DataGridView 縦スクロ...
-
YouTube 日本支社は存在するの...
おすすめ情報