JavaScriptでアニメーションを作成する方法

前へ 次へ
このQ&Aのポイント
  • JavaScript初心者のためのアニメーション作成の基本方法を紹介します。
  • Aの背景画像をブラウザサイズに合わせて表示し、Bの画像を配置してクリック後に拡大してフェードアウトさせる方法を説明します。
  • 参考になるサイトや書籍についてもご紹介します。
回答を見る
  • ベストアンサー

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

JavaScript初心者です。よろしくお願い致します。 現在製作中のサイトにて、JavaScriptを使ったアニメーションを作りたいと思います。 アニメーションの動きは下記のとおりです。 Aの背景画像を、ブラウザサイズにより画面いっぱいに表示。 その上にBの画像を配置（位置はAのこの位置…と決められています）。 ↓ 画面をクリック後、Aの背景、およびBの背景が拡大されてフェードアウトされます。 その拡大方法なのですが、それぞれの中心から拡大するのではなく、 ちょうど建物の前に犬がいるところに近づくような アニメーションを施したいと思います（※添付画像を参考）。 参考になるサイト、およびｊQueryなどありいましたら教えてください。 なにぶん、JavaScriptを使いはじめてまだ間もないので、 参考書を探すのにも苦労している次第です。 よろしくお願い致します。

画像を拡大する

質問者が選んだベストアンサー

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

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

goronoriss
質問者

お礼

こんなつたない質問文にここまで丁寧に答えていただき、ありがとうございます！！ javaScriptのしっぽすら掴めずにいたような状態だったので ものすごく助かりました！ 感謝します！本当にありがとうございました！

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

どの程度までを理解なさっているのかわかりませんが、 　・画像のズームのアニメーション 　・画像の移動のアニメーション が作成できれば、これを組み合わせることで可能と思われます。 結局のところ、画像の中心を移動しないようにしてズームするのと同じことになります。（固定する位置が異なるだけ） 例えば、画像をズームするのにwidth、heightを指定すると思いますが、固定点が画像の横・縦に対してそれぞれ（p、q）の割合の位置だとすれば、その位置の実際の寸法値は 　画像の左から width×p 　　　　　上から height×q　　　になるはずです。 この位置を、画像表示範囲の（x、y）のところに固定するのであれば、画像の表示位置を 　left = x - width×p 　top = y - height×q　　　にすればよいのではないでしょうか。 これらをアニメーション処理内で同時に行えば実現できると思います。

goronoriss
質問者

補足

ご回答いただいたのに再度のご質問、申し訳ありません。 参考となるサイトがありましたら、教えていただけないでしょうか？ 昨今、jQueryでアニメーションするというものが主流となっており、 希望の動きを実現するjQueryはもとより、画面いっぱいに表示されている背景画像を徐々にズームする…というサンプルを見つけられずにいます。 お手数をおかけしますが、何卒よろしくお願い致します。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascript 画像のワイプ表示

    javascript(特にjquery)を用いて画像ファイルをPowerPointのアニメーションにある「ワイプ」(オブジェクト端から特定方向にフェード表示)のように表示させる方法を探しています。 CSSで画像のwidthを0にしてanimate()で100%に拡大する方法だとあまりきれいなワイプにならず、さらにheightも拡大されてしまうため1点から拡大したようになり、思っているアニメーションと異なります。 何か方法を伝授していただければ幸いです。

  • 背景をアニメーションにしたい

    下記サイトのように、アニメーションを背景に全画面で表示したいと思っております。 http://aprender.redbe.jp/css/background/ クロームや、Firefox、IE９ではCSS３の記述（background-size）で上手くいきましたが、 IE７・８では対応していなく、表示されませんでした。 解決策として、jQueryを使ってみようと思います。 アニメーションを全画面にするにあたっての 参考になるサイトや、jQueryの記述方法を教えてください。 全くの初心者なので、詳しく教えていただけると嬉しいです。 どうぞ、よろしくおねがいします。

  • javascriptにてご質問です。

    javascriptにてご質問です。 よくいろんなサイトに現在見ているページのナビの画像が違ったり、背景色が違ったりしているサイトがあります。 これはどのように作成すればよろしいのでしょうか? javascriptだとは思うのですが、調べてもわからず困っています。 jqueryでもかまいませんので、どなたかご教示いただけないでしょうか? 参考サイトはhttp://delivery.gnavi.co.jp/のページTOPにあるナビです。

  • amazonの商品画像拡大のようなjavascriptライブラリを探し

    amazonの商品画像拡大のようなjavascriptライブラリを探しています。 なかなか見つからず、自分で作るしかないのかと困っています。（javascriptは超初心者・・・）どなたかご存じないないでしょうか？ こちらのような↓ http://www.amazon.co.jp/gp/product/images/B0034KZXBE/ref=dp_image_z_0?ie=UTF8&n=637394&s=videogames (1)クリックでスムーズにアニメーション拡大 (2)マウスで画像をつかんで移動 できるのを探しています。 jQueryだとベストですが、他のでも構いません。 よろしくお願いします。

  • アニメーションの作成

    この度、飲食店のホームページにて、アニメーションを載せようということになりました。 パソコンは今まで利用していたので、それなりの知識は備えているつもりですが、 なにぶんどれを使えばいいのかということがわからなかったので質問させて頂きます。 まず、どういったものを作りたいのかというと、 飲食店の内観の写真を、アニメーションにて１つの画像データにて数枚紹介できるものを作りたいです。 各写真の間にはフェードアウト(白く淡くなって次へ・・・)のようなものを用い、写真がパッと入れ替わるものではなく、自然な感じに見せたいと思っております。 ネットにて検索もして色々見てみたのですが、何かオススメのアプリはありますでしょうか？ ちなみに、最終的にはファイル形式はGIFにしたいです。 最近GIFに何か規制絡みの問題が生じて、アプリがなかなか無いという話も見たのですが・・・ ございましたら教えてください。

  • 「jQuery」Lightboxのアニメーションを無くしたい

    フォトギャラリーのホームページを作っています。 サムネイルをクリックしたら、ページ上で写真が拡大表示され、 拡大写真の以外の部分がグレーになるような演出をしたく思っています。 つまりjQueryのLightboxのようにしたいのですが、 Lightboxの「写真を表示するごとに、画像幅に合わせて枠が広がり、 最後にクローズボタン部分が表示される」というアニメーションを無くしたいと思っています。 （シンプルに拡大画像がでてくるのみ、にしたい） このようなことは設定で可能でしょうか？ ちなみに「Lightbox」では無く、「ThickBox」というものを使ってみたのですが、 これが理想の動きではあるものの、IE６ですと画像を開いたときに背景のページが 少しずれる、という不具合があります。 Lightboxの設定や他のライブラリ等ご存知でしたら教えていただけないでしょうか？ 知識不足のため、説明が拙くすみません。。。 どうぞ宜しくお願いもうしあげます。

  • cssのanimationの設定の仕方

    Animationの表示タイミングが合わないので教えてください。 今回初めてcssのanimationを使ってみました。 同時に、jQuery.BgSwitcher を使って背景画像５枚を５秒間づつ表示させてループさせています。（合計２５秒間）そして、cssのanimation でテキストA,B,Cの３枚を２５秒間表示させています。 表示タイミングは 【背景画像1を表示　テキストＡを表示　テキストＢを非表示　テキストＣを非表示】 【背景画像2を表示　テキストＡを非表示　テキストＢを非表示　テキストＣを非表示】 【背景画像3を表示　テキストＡを非表示　テキストＢを表示　テキストＣを非表示】 【背景画像4を表示　テキストＡを非表示　テキストＢを非表示　テキストＣを非表示】 【背景画像5を表示　テキストＡを非表示　テキストＢを非表示　テキストＣを表示】 背景画像で使用しているjQuery.BgSwitcherの表示時間は1枚５秒です。５枚ですので２５秒でループです。animationが適応されているテキストＡ，Ｂ，Ｃの　animation-duration: 25s;　にしています。 テキスト画像Ａ，Ｂ，Ｃは表示されるタイミングではopacity:1 にしてそれ以外はopacity:0で非表示にして背景画像1,2,3とテキストA,B,Cとの表示タイミングが合わせたいです。 初めはタイミングよく背景画像とテキスト画像が表示されているのですが徐々に表示タイミングずれてしまい５分ぐらいするとanimationのテキストA,B,Cの表示タイミングが背景画像と大きくずれ、例えばテキストＡが背景画像5で表示されるようになってしまいます。 jQuery.BgSwitcherでの背景画像５枚の１ループの時間は２５秒。animationのテキストA,B,Cのanimation-duration: 25s;　なのですが、徐々にずれてしまいます。 animation側の設定に問題があるかもしれませんので教えていただけないでしょうか？ 現在のテストサイトは下記です。 http://cm-creation.net/yoshida/text-anime-test/index13.html どうぞよろしくお願いいたします。Cssとhtml設定は下記です。 ■cssの設定 .bg-slider { width: 99.1vw; height: 100vh; background-position:center center; background-size: cover; display: flex; justify-content: center; position: relative; } .textA { position: absolute; 　　top: 5%; 　　 left:20%; animation-name:animation1; animation-duration:25s; animation-timing-function: ease-in-out; animation-delay: 0s; 　　 opacity: 0; 　　 animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } .textB { position: absolute; top: 5%; 　　 right:20%; animation-name:animation2; animation-duration:25s; animation-timing-function: ease-in-out; animation-delay: 0s; 　　opacity: 0; 　　animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } .textC { position: absolute; top: 5%; animation-name:animation3; animation-duration: 25s; animation-timing-function: ease-in-out; animation-delay: 0s; 　　　　opacity: 0; 　　 animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: forwards; } @keyframes animation1 { 0% { opacity: 0; transform: translate3d(0, 30px, 0); 　　} 5% { opacity: 1; transform: translate3d(0, 0, 0); 　　 } 26% { opacity: 0; transform: translate3d(0, 0, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } } @keyframes animation2 { 0% { opacity: 0; transform: translate3d(0, 0px, 0); } 41% { opacity: 0; transform: translate3d(0, 30px, 0); } 　45% { opacity: 1; transform: translate3d(0, 0, 0); } 66% { opacity: 0; transform: translate3d(0, 0px, 0); } 100% { opacity: 0; transform: translate3d(0, 0, 0); } } @keyframes animation3 { 0% { opacity: 0; transform: translate3d(0, 0px, 0); } 　　81% { opacity: 0; transform: translate3d(0, 30px, 0); } 85% { opacity: 1; transform: translate3d(0, 0, 0); } 　　101% { opacity: 0; transform: translate3d(0, 0px, 0); } 　102% { opacity: 0; transform: translate3d(0, 0, 0); } } ■html <script> jQuery(function($) { $('.bg-slider').bgSwitcher({ images: image/main10.jpg','image/main11.jpg','image/main12.jpg','image/main13.jpg','image/main14.jpg'], // 切り替える背景画像を指定 interval: 5000, // 背景画像を切り替える間隔を指定 5000=5秒 loop: true, // shuffle: false, // effect: "fade", // エフェクトの種類をfade,blind,clip,slide,drop,hideから指定 duration: 500, // エフェクトの時間を指定します。 easing: "swing" // エフェクトのイージングをlinear,swingから指定 }); }); </script> <div class="container-fluid px-0 bg-slider " > <div class="textA"><img src="image/item8.png" class="img-fluid" alt=""/></div> <div class="textB"><img src="image/item9.png" class="img-fluid" alt=""/></div> <div class="textC"><img src="image/item10.png" class="img-fluid" alt=""/></div> </div>

    • ベストアンサー
    • HTML
  • Jqueryのjavascriptが読み込まれません

    はじめまして。 Jqueryのsuperfishを使用したサイトを作っているのですが、javascriptファイルが読み込まれていないような状態になっています。 具体的には 1）ローカル環境では問題なく読み込まれている 2）サーバにアップすると、同階層の別ページ（A.htmlとします）では機能しているのに、特定のページ（B.html）では読み込まれていない ※A.htmlとB.htmlで同じ効果（superfishによるアコーディオンナビ実装）を得たい 3）A.htmlの<head>内javascriptに関する記述とB.html内同箇所の記述は全く同じ 4）B.html内の他の単独のjavascriptは問題なく読み込まれる という状況です。 この場合どのような原因が考えられるのでしょうか。 javascriptについては全くの初心者であり、どうにも解決できず、困っています。 ちなみに使用しているjqueryはjquery-1.2.6.min.jsです。 （大元であるA.htmlは違う方にコーディングしてもらい、そのデータを元にB.htmlをコーディングする作業をしています） jquery-1.2.6.min.jsもしくはsuperfish.js内に動かすhtmlへのパスが記載されているのかとも思いましたが、知識不足で該当の箇所が見つけられず…。 ご意見を頂ければ幸いです。 どうぞよろしくお願い致します。

  • Queryのプラグイン（jAni）を 全画面表示

    背景画像をアニメーションさせるjQueryのプラグイン（jAni）を、 全画面表示にさせる方法を教えてください。 全くのjQuery初心者で、本当に困っています。 助けてください。お願いいたします。 jQueryのプラグイン (jAni)を導入したのですが、 全画面で表示させなければならなくなってしまい どうしようもなく困っています。 ＵＲＬ 背景画像をアニメーションさせるjQueryのプラグイン -jAni http://coliss.com/articles/build-websites/operation/javascript/jque... ソースの19行目と２０行目で表示の大きさを決めているところまでは分かりましたが 何をどう変えればいいか、行詰ってしまいました。 宜しくお願いいします。 １８行目 function _build(){ １９行目 element.width(settings.frameWidth); ２０行目 element.height(settings.frameHeight); ２１行目 element.css('background-position', '0 0'); ２２行目 };

  • ウェブのアニメーション（縦スクロール時）

    最近おしゃれなサイトを見ると縦スクロールをするとアニメーションが動作したりするサイトを見ます。ウェブサイトを作ったりするのですが、あれはツール等で作成しているのでしょうか。それともプログラミングでアニメーションを記述しているのでしょうか。 例えば、このようなサイトです。 http://www.makita.co.jp/special/ 自分もこういった凄いサイトを作りたいと思っておりますが、参考になる本はないのでしょうか。 PHP, Ruby,Java等でウェブアプリケーションを作成する能力は持っております。 JavaScriptでXMLの処理等もできます。jQueryは少しだけできます。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する