• 締切済み

【java】背景画像を一定時間でフェード切り替え

よろしくお願いします。 下記のページを参考に、 http://javascript.eweb-design.com/0802_ici.html 背景画像を一定時間で切り替えることはできたのですが、 画像が切り替わる時に、ゆっくりフェードしながら切り替わるということは可能でしょうか？ 同じような挙動であれば、他のスクリプトやjQueryでも問題ありません。 実現させたい内容としては、 ・bodyの背景画像が切り替わる（div等ではなく） ・フェードで切り替わる になります。 ご存知の方おられましたら、ご教授くださいませ。 どうぞよろしくお願いいたします。

みんなの回答

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

ANo1です。 ＞bodyの背景にこだわっているので～～ ばかばかしくて思いつかなかった方法がありました。 透明化の過程をそれぞれ画像で用意しておいて、順に背景を変えていく方法。 これなら完全に背景の操作だけでご質問の内容が実現できますし、質問者様がご存知の背景を取り替えることのみで実現可能となります。 ただし、事前に画像を読込んでおく必要がでてくるでしょう。 方法論だけですので、上記のような方法をやろうとする人はいないでしょう。（考えもしないでしょう） その意味では、No1の方法もほとんど採用されないと思います。 スクリプトを用いることで動的に画面表示の状態を変えることが可能になりますが、その一瞬々々の状態をとって見れば、HTMLとCSSで表示できないものはありません。 逆にいうと、HTMLとCSSで表示できない状態は、スクリプトを利用しても表示できません。 bodyの背景を半透明にする方法があれば、直接に背景をフェードさせることが可能になるかと思います。

回答No.3

とりあえずそのサイトは古すぎるといっておきます。 個人用途なら問題ありませんが、公開するのであれば FireFox（Gecko系）やChrome（webkit系）も考慮しないといけません。 IEも7ぐらいから標準準処に近づいてきていますが、IE独自仕様のものを使用しても他のブラウザでは使えません。 css3に関しても各ブラウザによって実装度は違います。 出来るけど、質問者様のレベル的に面倒そうだという結論でスルーされてるのではないでしょうか。 というのはまあおいといて。bodyの背景画像にこだわらないのであれば jQueryとjQueryを利用したプラグインを利用すれば簡単に実装できます。 http://matome.naver.jp/odai/2132859679359719601

pencil87
質問者

お礼

ご回答ありがとうございます。 bodyの背景にこだわっているので、お教えいただいたjQueryだと難しそうです・・・。 >出来るけど、質問者様のレベル的に面倒そうだという結論でスルーされてるのではないでしょうか。 別の質問になってしまい、恐縮ですが、 今回のこの質問でそうご判断されたのでしょうか？ もしくはこれ迄の質問をご覧になられての判断でしょうか？ 教えてgooの仕組みがいまいちわからず・・・。

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

訂正です。 HTML5 → CSS3 でしたね。 （う～ん。ボケがはじまったのかなぁ…）

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

何度も同じ質問をなさっているようですが… 『bodyの背景画像をフェードで切替える（divではなく）』という明確な条件付きなので、回答が付かないのではないかと… 調べてはいませんが、HTML5でも背景画像の透明度指定はできなかったような気がしますが。 （できるのでしたっけ？　それなら、HTML5対応のブラウザなら可能かも） ご指定の条件をかいくぐってやるならば… 1）body直下にz-indexを-999などで画面サイズのマスクのボックス（divなど）を生成する。 2）ボックスの背景色をbodyの背景色で塗りつぶしておいて、フェードで表示。 　　（背景がフェードアウトするのと同じように見えるはず） 3）bodyの背景を切替える 　　（切替わったことは見えない） 4）ボックスをフェードアウト 　　（新しい背景がフェードインするように見える） 5）生成したボックスを削除 といった手順で、見かけ上は似たことができそうな気がしますが、普通に画像を切替えながらフェードイン/アウトする方が発想としてノーマルな気がします。 また、実質的には、bodyの背景をフェードイン/アウトさせているわけではないので、やっぱり回答にはなりませんね。

pencil87
質問者

お礼

ご回答ありがとうございます。 >何度も同じ質問をなさっているようですが… 一部条件を削除して投稿し直したつもりだったのですが、 (一応前の質問は削除しました) 「何度も同じ質問をしている」様に見えてしまうのでしょうか・・？ てっきり埋もれて誰も見ていないと思っていたのですが、 教えてgooの仕組みがいまいちわからず・・。

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

関連するQ&A

  • ｊQueryでの画像のフェードインのループ

    ｊQuery初心者です。 jQueryで３枚の背景画像がフェードインで切り替わり、ループするようにしたいのですが、 下記のように書いてみたのですが、１週ループまでは上手くいくのですが、２週目に２枚目の画像で止まってしまいます。 下記だと何故２週目の２枚目で止まるのか？の原因と、スマートな書き方をご教授頂けませんか？ <head> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <script> $(function() { $("div.fadein_1").fadeIn(1000); setInterval(function(){ $("div.fadein_2").delay(4000).fadeIn(1000, function(){ $("div.fadein_3").delay(4000).fadeIn(1000, function(){ $("div.fadein_2").attr('style', 'display:none;'); $("div.fadein_3").fadeOut(1000, function(){ clearQueue(); }); }); }); }, 0); }); </script> <div class="fade"> <div class="fadein_1" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_2" style="display:none;"></div> </div> <div class="fade"> <div class="fadein_3" style="display:none;"></div> </div>

  • 【jquery】スクロールで背景画像もついてくる

    よろしくお願いいたします。 jqueryを使って背景画像をスクロールと一緒についてくるようにしたいのですが、 思い通りにいかず、質問させていただきたいと思います。 やりたいと思っていることは、 まず背景画像1（1.jpg）をbodyにbackgroundに設定して、 その上に<div></div>タグで背景画像2（2.png：透過画像）をbackgroundに設定し、 背景画像2だけスクロールと一緒についてくるようにしたいと思っています。 現状のソースは以下になっています。 【html　head内】 <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#haikei').css('background-position', '50%'+ parseInt( y / 3 ) + 'px'); }); }); </script> 【html　body内】 <div id="haikei"> <div id="wrapper"> <div id="header"> 　～略～ </div> <div id="contents"> 　～略～ </div> </div> </div> 【CSS内】 #bg01 { background: url(2.png) top center repeat-y; } 今の状態だと、動き自体は思い通りに動いてくれるのですが、 背景画像を表示させたい位置がありまして、 <div id="header"></div>内には2.pngを表示させず、 <div id="contents"></div>の部分から2.pngを表示させて スクロールについてくるようにしたいと思っています。 下記のように、 <div id="wrapper"> <div id="header"> 　～略～ </div> <div id="haikei"> <div id="contents"> 　～略～ </div> </div> </div> と、<div id="haikei"></div>の位置を変えてみましたが、 これだとスクロールしたときに、<div id="header"></div>の下から 画像が途中からはみ出てくる？ような感じで、きれいにスクロールされません。 さらにCSSのrepeat-yをno-repeatに変えて試してみましたが、 その場合画像がページの一番下まで動いてくれません。 （途中までしか画像がついてきてくれない感じです） 方法としては、2.pngの表示開始位置を<div id="header"></div>より下に位置指定すれば うまくいくのかなと思ったのですが、書き方がわからず。。。 なにかうまくいく書き方はないでしょうか・・？ もしくは上記の方法以外でも、実現できそうなやり方や、 参考になりそうなサイトがあればお教えいただきたいと思っています。 ちなみに、私が参考にさせていただいたサイト様はこちらです。 http://www.webopixel.net/javascript/350.html わかりにくい点がありましたら、補足いたします。 どうぞよろしくお願いいたします。

  • jQuery & 下記のスクリプトにて画像のフェードイン・アウトで切り

    jQuery & 下記のスクリプトにて画像のフェードイン・アウトで切り替えるスクリプトについてご質問です。 http://medienfreunde.com/lab/innerfade/ html のロード時に数枚の切り替え予定の画像がスクリプトが 読み込まれる前に全部表示されてしまって格好が悪いので、 表示させないようにする為には、どうすればよろしいでしょうか？ 特に上記のスクリプトを用いなくても代替えのスクリプトがあれば、そちらでも構いません。

  • フェードによる<div>要素の背景画像の切り替え

    以下のようにして、背景画像を切り替えておりますが、 これにフェード効果を追加することは可能でしょうか。 -html- <div id="wrapper"></div> -javascript- $(function() { var i = 1; setInterval(function() { if(i > 3) i = 1; $("#wrapper").css("background","url('./images/img"+i+".jpg')"); i++; }, 4000 ); }); もし可能でしたら、具体的なソースコードも 教えて頂けますと非常に助かります。 どうぞ宜しくお願い申し上げます。

  • 指定した背景画像を数秒ごとに切り替えるプラグイン

    java初心者です。 というか申し訳ありませんが全くわかりません。 しかし、どうしても指定した背景画像を数秒ごとに切り替えなければならなくなり、 下記のサイトで jQueryプラグインをダウンロードしたのですが使い方が全くわかりません。 http://rewish.org/demo/jquery_bg_switcher/ ダウンロードしたファイルの中にあったexample.htmlを見たのですが どこで背景画像を変更したらいいのか分からず、 <title>jQeury.bgSwitcher.js</title> <script src="http://www.google.com/jsapi"></script> <script>google.load("jquery", "1.4.2");</script> <script src="../jquery.bgSwitcher.js"></script> head内にあるこの文章の意味もわかりません。 下の<script src="../jquery.bgSwitcher.js"></script>はjquery.bgSwitcher.jsの場所を指定しいるということはわかるのですが、なぜ上の２行にはgoolgeがついているのか。 flashを使わず背景画像を変更したいのですが、どなたか使い方が分かる方はいらっしゃいますか。いたら教えていただけたらうれしいです。 また、start、stopなどの機能もついていたのですが、私には必要なく TOPのメイン画像を背景画像に指定し、３、４秒で順番に切り替えたいのです。 （現在未定ですが、もしかしたら5枚ほど画像を切り替えたら最後の１枚で画像をstopさせるかもしれません） ちなみに画像は imgフォルダの中に入っていて main1からmain5の5枚あり、widthが770pxにheightが279pxです。 もし他にもっと簡単なやり方などあれば教えていただけたらうれしいです。 javaのことが全然分からないため至らぬ点が多々あると思いますが、どうぞよろしくお願いいたします。

  • 指定時間経過後に画像を一定時間で切替

    Javascriptで指定時間経過後に画像を一定時間で切替したいと思っています。 一定時間の画像切替は以下のように実現しています。このJavascriptにさらに”指定時間経過後”という条件を付けたいのですがどうしたらよいでしょうか？ ■Javascript <script> $(document).ready(function(){ $('.slideImg img:gt(0)').hide(); setInterval(function() { $('.slideImg :first-child').fadeOut(3000).next('img').fadeIn(3000).end().appendTo('.slideImg '); },5000); }); </script> ■HTML <div class="slideImg "> <img src="img1.jpg" alt="" /> <img src="img2.jpg" alt="" /> <img src="img3.jpg" alt="" /> </div> ■CSS .slideImg{ position:relative; width: 100px; height: 100px; } .slideImg img{ position:absolute; left:0; top:0; }

  • 画像をランダムにフェードイン

    【参考サイト】 http://black-flag.net/jquery/20120606-3908.html <html> <head> <title>TOP</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.champagne.js"></script> <script type="text/javascript"> $(function(){ $('ul.champagne').champagne({ beginning_delay: 1000, delay_between: 500, duration: 1000, } }); }); </script> </head> <body style=""> <ul class="champagne"> <li><img src="画像１" /></li> <li><img src="画像２" /></li> <li><img src="画像３" /></li> <li><img src="画像４" /></li> </ul> <script type="text/javascript"> $(function(){ $("ul.champagne").champagne(); }); </script </ul> </body> </html> 上記のタグで表示させてみましたが画像だけ表示され、フェードインが始まらない状態です・・・・・。 どうすれば正常に動きますか？ よろしくお願いします。

  • jQueryで、画像クリック→フェードイン

    初めまして。私は大学の課題でウェブサイトを作成しており、jQueryを勉強しています。 かなりの初心者なのです。 今jQueryでイメージギャラリーのようなものを作っていて、小さい画像にマウスオーバーで触れると、となりに大きい画像がフェードインしつつ表示されるというようにしたいです。 DW上では画像もかわりますし、フェードインもうまくいったのですが、ブラウザで見てみると、画像がぱっと変わるだけでフェードインの効果が反映されていません。 これは何故なのでしょうか・・・。 スクリプトの例は以下です。 $(function(){ $("img.top1").mouseover(function(){ 　　$("#mainimg img").attr("src","img/topimg1.jpg"); 　　$("#mainimg p:not(:animated)").fadeIn("slow"); })　・・・・ 小さい画像のtop1に触れると、divのmainimgという範囲の画像が、top1からtopimg1に変わって、なおかつフェードインされるという風に書いたつもりです・・・。 #mainimgの「p」は、htmlでは、<p id="fadeIn"><img src="img/topimg1.jpg" width="539" height="343" /></p> というように、#mainimgの範囲のimg要素（大きい画像が表示されるところ）の前に、id名にfadeInと入れた部分のpです。 スクリプトに何か問題があるのかどうかもわかりません。 しかしブラウザで作動しないのはおかしいですよね。 どなたか分かる方がいれば教えてくださると嬉しいです。 よろしくお願いいたします。

    • ベストアンサー
    • AJAX
  • ビットマップ画像による背景繰り返しにフェードイン

    Flashのbitmap画像について質問です。 使用ソフト、FlashCS5　AS2 ビットマップ画像を全画面Flashで背景として表示させているのですが、 この背景画像を徐々にフェードインさせたいと思っています。 下記スクリプトを設置しているのですが これにフェードインさせる方法をわかる方がおられましたら お教え頂けませんでしょうか。 bmp = flash.display.BitmapData.loadBitmap("background"); mat = new flash.geom.Matrix(); _root.beginBitmapFill(bmp, mat,true,true); _root.moveTo(0, 0); _root.lineTo(Stage.width, 0); _root.lineTo(Stage.width, Stage.height); _root.lineTo(0, Stage.height); _root.endFill(); どうぞ宜しくお願いいたします。

    • ベストアンサー
    • Flash
  • 指定した背景画像をサイトを訪れるたびに切り替える

    Javascript初心者で、全く見当がつきません。 お力をお貸しください。 参考サイトのように、 Bodyではなく、DivのID一部分のみ、 背景画像がサイトを訪れるたびに切り替わるようにしたいのですが， どのサンプルも「Body」の背景が変わってしまいます。 どなたか、お答えして頂けないでしょうか？ <参考サイト> http://www.upenn.edu/ <現在記述中のソース> <html> <head> <style type="text/css"> #content { color: #ffe700; font-size: 30px; height: 600px; } </style> <title>見る度に背景色が変わります</title> <script language="JavaScript"> <!-- function color(){ bgcolor = "#"; for(i = 0 ; i < 6 ; i++) { //0から15の乱数を発生させる color = Math.floor(16 * Math.random()); //16進数に変換 color = color.toString(16); //つなぎ合わせる bgcolor = bgcolor + color; } //文字列を背景色に document.bgColor = bgcolor; } //--> </script> </head> <body onLoad="color()"> 見る度に背景色が変わります<br> <div id="content"> ここの背景にランダムに画像が変更して欲しい。Bodyではなく、Divの指定したID内にのみ表示して欲しいのです</div> </body> </html>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する