JavaScriptでアニメーションを作成

質問

JavaScript初心者です。よろしくお願い致します。

現在製作中のサイトにて、JavaScriptを使ったアニメーションを作りたいと思います。
アニメーションの動きは下記のとおりです。

Aの背景画像を、ブラウザサイズにより画面いっぱいに表示。
その上にBの画像を配置（位置はAのこの位置…と決められています）。
↓
画面をクリック後、Aの背景、およびBの背景が拡大されてフェードアウトされます。

その拡大方法なのですが、それぞれの中心から拡大するのではなく、
ちょうど建物の前に犬がいるところに近づくような
アニメーションを施したいと思います（※添付画像を参考）。

参考になるサイト、およびｊQueryなどありいましたら教えてください。
なにぶん、JavaScriptを使いはじめてまだ間もないので、
参考書を探すのにも苦労している次第です。

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

回答No.2

fujillin · ベストアンサー

#1です。

＞サンプルを見つけられずにいます。
『作りたい』というご質問だったので、てっきり作成するのだと思っていましたが。
コピペでご質問のような動作をするものは、内容が少々特殊なので、多分見つからないと思います。

サンプルや原理については、情報が沢山あると思いますので、検索すればいろいろ見つかるはずです。

◆＜原理的なもの＞（比較的シンプルに書いてある）
http://javascript123.up.seesaa.net/javascript/zoom_Square.html
http://www5e.biglobe.ne.jp/~komichan/javascpt/htmlJS_photozoom.html

◆＜マウスホイールで拡大・縮小＞（IE専用の記述法になっているので他のブラウザでは動かないかも）
http://www.sotechsha.co.jp/JS_SB/image/099.html

＞昨今、jQueryでアニメーションするというものが主流となっており
jQueryのものは大抵ライブラリ化されてしまっているので、ズーム単体のサンプルは見つからないかも。
というのも、jQueryだとズームそのものは1、2行の記述で済んでしまいますし、ズーム自体がそのスクリプトの目的ではないので、ちょっとしたエフェクトとして使用しているにすぎないからです。

◆＜jQueryズームの例＞（jQuery解説サイトのサンプル）
http://semooh.jp/jquery/api/effects/animate/params%2C+options/

◆＜少々目的は違いますが、ズームを利用したライブラリの例＞
http://www.dfc-e.com/metiers/multimedia/opensource/jquery-fancyzoom/
http://buildinternet.com/live/elasticthumbs/
http://addyosmani.com/blog/zoomer-gallery-a-jquery-plugin-for-displaying-images-with-flash-like-zooming-effects/

◆＜拡大・縮小と移動の組合せという意味では内容的に近いのかも＞
　（見た目は全然違いますが、処理方法として）
http://demo.tutorialzine.com/2010/07/making-slick-mobileapp-website-jquery-css/mobileapp.html
http://malsup.com/jquery/cycle/

＞背景画像を徐々にズームする
え～～っと。　背景画像でないとダメなのでしょうか？
背景画像でもCSS3でサイズ指定が可能になったようですが、対応するブラウザが限られるのと、画像要素をズームするのとは方法が若干異なるので、両方を記述したものを作るよりも、「画像をズームする」スクリプトひとつを使って、二つの画像を拡大・縮小する方が簡単そうに思えますけれど？
http://www.htmq.com/css3/background-size.shtml

検索で探すにしても、求めるものそのものを探すよりは内容を分解して、「背景画像のサイズを指定する方法」、「スクリプトでCSSを制御する方法」、「スクリプトでアニメーションする方法」などのように分けて別々に探す方が適切な情報を得られると思いますし、複合すればするほどそのようなものにマッチする情報が飛躍的に少なくなるはずです。

＞画面いっぱいに表示されている背景画像を徐々にズームする
速度に関しては設定しなおせばほぼ自由になるはずです。
画面いっぱいとは値が可変ということを意味するのでしょうか？
その場合は、最初にスクリプトで画面サイズを取得してそれを初期サイズとして記憶しておけばよろしいかと。
単に、「画像が大きい」という意味だけであれば、特に問題はないように思えます。
単純に画像を拡大しただけだと、それに伴ってブラウザの表示サイズも大きく認識されてしまいますので、親の要素でoverflow:hiddenにしておくか、あるいは画像をclipするかなどが必要になるかも知れません。

#1にも書きましたように「どのくらい理解なさっているのかわかりません」が、#1の回答内容がもしも『？』状態でしたら、一気にお求めのものを作ろうとするよりも、
　・単純に一つの画像を拡大してみる
　・一つの画像を移動してみる
　・両方を組合せて、画像中の任意の一点を固定できるようにする
　・複数の画像を同時に制御する
などというように、順を追って作っていった方が、結果的には近道かと思います。
その途中で不明な点が出てきたら、そこについて具体的な質問をなさる方が、詳しい回答が得られると思います。

お礼

こんなつたない質問文にここまで丁寧に答えていただき、ありがとうございます！！

javaScriptのしっぽすら掴めずにいたような状態だったので
ものすごく助かりました！
感謝します！本当にありがとうございました！

回答No.1

fujillin

どの程度までを理解なさっているのかわかりませんが、

　・画像のズームのアニメーション
　・画像の移動のアニメーション
が作成できれば、これを組み合わせることで可能と思われます。
結局のところ、画像の中心を移動しないようにしてズームするのと同じことになります。（固定する位置が異なるだけ）

例えば、画像をズームするのにwidth、heightを指定すると思いますが、固定点が画像の横・縦に対してそれぞれ（p、q）の割合の位置だとすれば、その位置の実際の寸法値は
　画像の左から width×p
　　　　　上から height×q　　　になるはずです。

この位置を、画像表示範囲の（x、y）のところに固定するのであれば、画像の表示位置を
　left = x - width×p
　top = y - height×q　　　にすればよいのではないでしょうか。

これらをアニメーション処理内で同時に行えば実現できると思います。

補足

ご回答いただいたのに再度のご質問、申し訳ありません。
参考となるサイトがありましたら、教えていただけないでしょうか？

昨今、jQueryでアニメーションするというものが主流となっており、
希望の動きを実現するjQueryはもとより、画面いっぱいに表示されている背景画像を徐々にズームする…というサンプルを見つけられずにいます。

お手数をおかけしますが、何卒よろしくお願い致します。