• 締切済み

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

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

  • tsyok
  • お礼率90% (29/32)

みんなの回答

  • weakweak
  • ベストアンサー率34% (350/1003)
回答No.1

http://allabout.co.jp/gm/gc/23797/ background-imageにgifアニメを指定してあげるだけで参考URLのようになりますよ。

tsyok
質問者

お礼

＞weakweakさん ご回答ありがとうございます。 最初に申し上げればよかったのですが、 janiというjQueryのプラグイン（アニメーション）を使っておりまして、 CSSの記述だと、全画面（拡大表示）に対して上手くいきませんでした。（私の記述が悪いのかもしれませんが） janiのURL http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-jani.html なので、何とかjQueryなら上手くいくのではと思い、 思考錯誤している状態でございます。 けれども、background-imageというCSSが使えるということは、今後の一歩にもつながりました。 ありがとうございます。

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

関連するQ&A

  • gifアニメーション背景 javascript

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

  • 背景画像表示について

    CSSでbodyの中にbackground-image で背景を設定したのですが IE以外ではうつっていませんでした。 なので <div style="width : 1300px; 　　　　　height : 1000px; 　　　　　top : 1px; 　　　　　left : 2px;position : absolute; 　　　　　background-image: url(****.gif); 　　　　　z-index: 1; 　　　　　visibility : visible; 　　　　　" id="pagebody"> としてみましたらIEとGooglechromeはうつるようになりました。が、 firefoxではうつりませんでした。ここで疑問に思ったのが 基本なはずの背景画像にブラウザによって表示が異なるのか、と。 本を読んでもインターネットで調べてもそんなことはないとかいてありました。 僕の記述が間違っているとしか考えられません。 正しい記述を教えてください。 ちなみにCSSは外部内部両方ためしました。 htmlでbodyに背景指定もやってみました。でもやっぱりIEしかうつりませんでした

    • ベストアンサー
    • HTML
  • IE７とfirefox2.0でcssによってテーブルのセルの背景の表示がfirefoxで表示されないことについて。

    cssを外部リンクで td.1-cell{ width:200px; 　 background:#F8F8F8; } と記述し、 <td class=1-cell> で呼び出したところ、IE７では正確に表示されているのに対して、 firefoxで背景の色が表示されず無色となってしまいます。 どうすればfirefoxとIE両方で表示できるのでしょうか。

    • ベストアンサー
    • HTML
  • 背景色が出ません。

    CSSで bodyに背景画像、 wrap全体にbackgroundで色の指定、 wrapの中のdivにもbackgroundで色の指定をしていますが、divのbackground色が出てきません。 wrapの指定色が利いたままです。 ブラウザはFirefoxです。 IEでは問題ないのですが・・・。 どのようにしたら、Firefoxでもbackgroundの色が利くようになりますか？

    • ベストアンサー
    • HTML
  • 背景画像を反転させる方法

    背景画像を反転させる方法 いつもお世話になっています。 今、趣味のサイトの再構築に伴い、ネットや本を見ながらHTMLとCSSについて勉強中です。 そこでcssの記述について教えて頂きたいのです。 背景の画像を右下に固定する場合、cssの記述は、 body{ background-image:url("×××.gif"); background-repeat:no-repeat; background-attachment:fixed; background-position:right bottom; } としますよね？ 後、cssで画像を左右反転させる場合は、classでfilter: fliph()を使えばいいとわかりました。 ではこの反転させた画像を背景に使いたい場合、どうすればいいのでしょう？ そもそもそのようなことが可能なのでしょうか？ もし可能でしたら具体的にどのような記述をすればいいのか教えて頂きたいのです。 それとfilterはIE独特の要素と聞いていますが、filter: fliphもそうなのでしょうか？ しかしながらfilter: alphaに関しては filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; と記述すればFirefoxなどでも透明効果が出るようです。 filter: fliphもIE独特の要素ならばfilter: alphaのように他のブラウザでも対応させる方法があるのでしょうか？ 長々と書いてしまいましたが、知りたいことを要約すると １．cssで画像を反転させ、それを背景画像に使うことは可能か否か 　　可能ならばどう記述すればよいのか ２．filter: fliphで画像を反転させた場合、IE以外でのブラウザで反映されるか否か 　　また反映されないのなら、対応させる方法はあるのかどうか と言うことです。 １と２、分かる方だけでも結構ですのでよろしくお願いします。

    • ベストアンサー
    • HTML
  • 背景画像を二つ指定

    こんにちは。 全体の背景画像(斜めストライプの柄)と、 コンテンツ部分に背景画像(白で両サイドに線)を別々に指定したいのですが、 IEではうまく表示されましたがNetScape、Firefoxでは真ん中の画像が表示されません。。 URLはこちら http://ic.web6.jp/portfolio/rigtig.html 全体の背景はbodyに、 コンテンツにはdiv要素にrepeat-yで背景をそれぞれ指定しました。 どうすればIE以外でもうまく表示されるでしょうか？ 背景を指定しているCSSはこちら body { width : 762px; margin : 0 auto; background-image : url("images/top_bg.gif"); line-height:1.4; font-size:10pt; } div#wrap{ width : 762px; background-image : url("images/body_bg2.gif"); background-repeat: repeat-y; }

    • ベストアンサー
    • HTML
  • 背景画像の指定方法

    少し調べたのですが、さっぱり原因が分からない為質問させていただきます。 外部CSSで背景画像を指定しているのですが、WinXP IE7で作製した所うまくいったのですが、別のマシン（WinXP IE6）で見ると表示の仕方が変わってきます。 参考ソース▼ 【外部CSS】----- .bg { width:300px; background-image:url(bg.png); background-repeat:no-repeat; background-attachment:fixed; background-position: bottom;} 【HTML】----- <div class="bg">長い本文</div> IE7だと、開いているウィンドウサイズに合わせて、見ている画面範囲の下部に背景画像が来るのですが、IE6の方だと、長い本文をスクロールしていった最後に、背景画像が表示される状態です。 分かりにくい説明かもしれませんが、アドバイスよろしくお願い致します。

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

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

  • IE以外のブラウザで背景を固定させる方法

    スタイルシートで、ブログのタイトル部分の背景を固定しています。 IE6.0では画像が表示されるのですが、NetscapeやFirefoxでは表示されず、指定してある背景色だけになってしまします。 #title {background: #000 url("画像のURL") no-repeat; background-position:top;background-attachment : fixed;} このように記述していますが、IE以外のブラウザで表示させるにはどのようにすればいいのでしょうか。

  • CSSでBody要素への背景画像（san.jpg）の配置を以下の設定で

    CSSでBody要素への背景画像（san.jpg）の配置を以下の設定でしてみました。 Dreamweavercs4でのデザインモードとIE7のプレビューでは 画面中央に配置されて見えますが、safariとfireFox3.6.2では添付画像のように 画面上部に画像の下半分だけが表示されます。 これはどうしてなのでしょう？ それとFirefoxでも上下左右中央に表示されるようにするには どうしたらよいのでしょう？ ご存知の方がおられましたら、ご教示ください。 ※ディスプレイ解像度1280×1024 背景画像サイズ592px　×　568px ～～～～～～～～～～～～～～～～～～～～～ body { background-image: url(sun.jpg); background-repeat: no-repeat; background-position: center center; } ～～～～～～～～～～～～～～～～～～～～～

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する