動く画像について

Question

このような動く画像は

どのようにしているものか
検証できますでしょうか？
http://www.apple.com/jp/iphone-6s/

Answer

ECマスターズの田中です。

複雑な仕組みとなっておりますので、概要をお伝えいたします。

たとえば、ページ左上にあるゴールドモデルの場合、
http://images.apple.com/v/iphone-6s/a/overview/opt_hero_gold_large_2x.jpg
この画像の上に
http://images.apple.com/media/us/iphone-6s/2015/dhs3b549_75f9_422a_9470_4a09e709b350/overview/hero/gold_device_screen_2x.mp4
この動画を、CSSの「transform: matrix3d() 」という指定で変形させて上に載せたものを用意します。

用意したものの全体に対して、JavaScriptを使い、
ページのスクロールに合わせて
「transform: translate3d()」という指定の数値を変更することで
ページに合わせた動きを実現させております。

これを複数組み合わせることで、１機種ごとの違う動きを実現しております。

Answer

実際に添付画像をスクロール合わせて
動かすにはどうすればいいのでしょうか？

GOLDを使って商品ページ内に
フレームで載せてたいと考えております。

ややこしい事をやりたがって申し訳ないです。
どうぞご教授頂けましたら幸いです。

Answer

ECマスターズの田中です。

1枚の画像を、スクロールに合わせて動かすには
「パララックス」と呼ばれる効果を利用します。

jQueryを使ってパララックスを実現する方法は、
下記URLのデモをご参考いただくか、
http://webdrawer.net/javascript/parallax.html
下記URLに紹介されているjQueryプラグインを導入してご利用ください。
http://webdesignmagazine.net/javascript/jquery-plugin-parallax/

Answer

数日、いじってみて何となく理解してきましたが
楽天内ではフレームを入れてフレーム内でのスクロール計算になる為
イメージどうりにはいかないようですね…

しかしながら
大変勉強になりました！
ありがとうございました！