• ベストアンサー

gifアニメーション背景 javascript

element.style.backgroundでアニメーション付きのgifを表示したのですが、表示はしますがアニメーションしてくれません。 cssでの背景設定ではアニメーションしてくれたので、何か違うのでしょうか?

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

  • ベストアンサー
  • tracer
  • ベストアンサー率41% (255/621)
回答No.1

直接的な回答ではありませんが、以下のようにした方がスマートですよ。 html <div id="hoge"> gifを背景に表示する </div> css .animation{  background-image : url(animtion.gif); } js document.getElementById("hoge").className = "animation"; ところで、実際にはどのようなコードで指定したのですか? おそらくコードの記述に問題があります。

関連するQ&A

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

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

  • gifがアニメーションしない

     XPでIE6を使用しています.  いろいろなページに載っているアニメーションGIFが全然動きません(その動かない画像がアニメーションGIFであることは確認しています).アニメーションGIFを表示しようとすると,(恐らくアニメーションの最初の画像だとは思うのですが)静止して表示されます.  何か設定があるのでしょうか?

  • スタイルシートと、背景色の設定について

    画像を画面の中心に表示させようと、以下の様に設定したら、背景色が白になってしまうのです。 この場合どのようにすれば、背景を黒く設定できるのでしょうか? 画像の背景が黒なので困っています(涙 <head> <style type="text/css"> <!-- body{background:fixed url(***.gif) no-repeat 50% 50%} --> </style> </head> <BODY bgcolor="#000000"> 宜しくお願いします。。。

    • ベストアンサー
    • CSS
  • XPでアニメーションGIFファイルを壁紙にするには?

    おはようございます。 以前のWindows98ではできた気がしますが XPでアニメーションありのGIFファイルをデスクトップの壁紙(または背景)にできません。 どうやら、GIF以外でもアニメーションなしのGIFやJPEG、HTMLもできないようです。 画面のプロパティのデスクトップで参照を押したときに GIFやそのほかJPEGなども選択はできます。 しかし、選択して開くを押しても一覧のところに表示されません。 BMPしか読み込んでくれないようです。 なにか設定をするのでしょうか? それともXPではアニメーション系の画像は使えなくなってしまったのでしょうか? よろしくお願いします。

  • PhotoshopCS3でアニメーションGIFの作り方がわかりません

    WinXPで、PhotoshopCS3を使っています。 今の今までエレメンツ2を使っていたため すごく便利だなと関心しながらも、CS3でのアニメーションGIFの作り方がどうしても解りません。 レイヤーでの管理ではないのですよね…? アニメーションフレームを表示させることは出来たのですが、フレームを増やし、編集することが出来ません。 (同一画像のコピーしかできない) 検索をしたのですがどうもうまく目的の情報にたどり着くことが出来ませんでした。 もしご存じの方がいらっしゃいましたら教えて頂けるとありがたいです。

  • cssでアニメーションgifを作動させる方法

    初心者の者です。お世話になります。 いつもの様に困っております。ぜひ、お知恵をお貸しください。 h1の文字背面にアニメーションgif(1回表示)を表示させたいのですが、 現在は、h1にbackground: url(images/baranimation.gif) no-repeat;を入れております。 しかしIEでは、更新ごとにスタートしてくれるのですがFireFoxとgoogle chromeでは、更新やサイト内の他のページから戻っても再スタートしてくれません。 これを解決する方法がございましたらお願い申し上げます。 出来れば、h1 の背面に表示してくれる方法が知りたくお願い申し上げます。(CSSが機能しない携帯等でアニメーションは表示したくないのです。) http://coliss.com/articles/build-websites/operation/css/939.html や http://www.studiomame.com/mameblog/home/blog/0102flash/b080903.php の方法を少し試してみましたが、設定が悪いのかも知れませんが満足のいく結果が出来ませんでした。 文面もお粗末ですが、どうぞ、宜しくお願いいたします。

  • GIFアニメーション???

    GIFアニメーションを作成するフリーソフトで、画質がきれいなソフトを教えてください。 後、GIFアニメで、GIFを送る速度の設定って、どのように設定するのでしょうか。 誰か教えてください。 お願いします。

  • アニメーションGIFとJavaScript

    マウスカーソルを合わせたときだけに動くアイコンを作りたいのですが、JavaScriptでしか作れないのでしょうか?アニメーションGIFでは無理なのですか。 ご回答よろしくお願いします。

    • ベストアンサー
    • CSS
  • スタイルシートで背景画像を指定

    今までbodyタグで背景を指定していたのですが、スクロールバーや余白の設定で スタイルシートを使うことになったので、背景画像もスタイルシートで指定することにしましたが、何度やっても表示されません。 このように書いてみました。 <style type="text/css"> <!-- BODY { background-image:url(img/28.gif); } BODY { 余白の設定} BODY {スクロールバーの設定 } --> </STYLE> htmlと同じフォルダの中にある、imgフォルダの28.gifという画像です。 画像のパスは間違っていません。アップロードもしてあります。 スタイルシートの解説をしているサイトさんを見ても、 何が間違っているのかわかりませんでした。 なぜ背景が表示されないかわかる方いらっしゃいますか? 余白やスクロールバーはきちんと表示されているのですが・・・

    • ベストアンサー
    • CSS
  • html・cssによる背景の2重設定

    HP制作をしているのですが… 少々デザインを凝ってみようかなー、と考え、 背景の2重設定を思いついたのですが、どうしても表現できないのです。 私が言う背景の2重設定とは… 背景Aと背景Bがあり、背景Aは固定されているのですが、背景Bは画面中央に表示される-というものです。 画面をスクロールをしても背景Bは常に画面中央に表示されていて背景Aの上に背景Bは存在する-という形になっております。 私が試したhtml・cssを以下に記載したいとおもいます。 <html> <head> <title></title> <style type="text/css"> body{ background-image: url(B.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: center center; } </style> </head> <body background="sozai/haikei/A.gif"> <table width="100%" height="1500" border="0" cellpadding="0" cellspacing="0"> <tr><td> </td></tr></table> </body> </html> -とこのような形になっております。 背景Aを透過gifを用いて背景Bを表示させようと試みたのですが、画面全体に透過gifを用いるとスクロール時に読み込みに時間がかかって…大変ユーザーに見にくくなってしまいました。 質問の回答の程、どうかよろしくお願いいたします。