よろしくお願いします。
下記のページを参考に、
http://javascript.eweb-design.com/0802_ici.html
背景画像を一定時間で切り替えることはできたのですが、
画像が切り替わる時に、ゆっくりフェードしながら切り替わるということは可能でしょうか?
同じような挙動であれば、他のスクリプトやjQueryでも問題ありません。
実現させたい内容としては、
・bodyの背景画像が切り替わる(div等ではなく)
・フェードで切り替わる
になります。
ご存知の方おられましたら、ご教授くださいませ。
どうぞよろしくお願いいたします。
A 回答 (4件)
- 最新から表示
- 回答順に表示
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
ご回答ありがとうございます。
bodyの背景にこだわっているので、お教えいただいたjQueryだと難しそうです・・・。
>出来るけど、質問者様のレベル的に面倒そうだという結論でスルーされてるのではないでしょうか。
別の質問になってしまい、恐縮ですが、
今回のこの質問でそうご判断されたのでしょうか?
もしくはこれ迄の質問をご覧になられての判断でしょうか?
教えてgooの仕組みがいまいちわからず・・・。
No.1
- 回答日時:
何度も同じ質問をなさっているようですが…
『bodyの背景画像をフェードで切替える(divではなく)』という明確な条件付きなので、回答が付かないのではないかと…
調べてはいませんが、HTML5でも背景画像の透明度指定はできなかったような気がしますが。
(できるのでしたっけ? それなら、HTML5対応のブラウザなら可能かも)
ご指定の条件をかいくぐってやるならば…
1)body直下にz-indexを-999などで画面サイズのマスクのボックス(divなど)を生成する。
2)ボックスの背景色をbodyの背景色で塗りつぶしておいて、フェードで表示。
(背景がフェードアウトするのと同じように見えるはず)
3)bodyの背景を切替える
(切替わったことは見えない)
4)ボックスをフェードアウト
(新しい背景がフェードインするように見える)
5)生成したボックスを削除
といった手順で、見かけ上は似たことができそうな気がしますが、普通に画像を切替えながらフェードイン/アウトする方が発想としてノーマルな気がします。
また、実質的には、bodyの背景をフェードイン/アウトさせているわけではないので、やっぱり回答にはなりませんね。
ご回答ありがとうございます。
>何度も同じ質問をなさっているようですが…
一部条件を削除して投稿し直したつもりだったのですが、
(一応前の質問は削除しました)
「何度も同じ質問をしている」様に見えてしまうのでしょうか・・?
てっきり埋もれて誰も見ていないと思っていたのですが、
教えてgooの仕組みがいまいちわからず・・。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(パソコン・周辺機器) ウインドウズ10のログオフ画面に現れる画像について教えて下さい ログオフをしてログイン待ちの画面にな 1 2023/05/19 21:37
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
- JavaScript 指定時間になったら、WEBサイトの更新を自動で行うには…? 3 2022/04/28 22:14
- 美術・アート デザインについての考察。 なぜ人の脳は、規則正しく連続した要素を「背景」と認識するのか、実験してみま 2 2022/04/11 21:08
- YouTube YouTubeの動画。適正容量。 2 2023/03/19 08:39
- VR・AR YoutubeでVRゴーグル用の切り替えボタンが表示されない? VRゴーグル(中にスマホを入れるタイ 3 2022/10/20 10:27
- モニター・ディスプレイ 「.cur」のアイコン表示について 4 2023/03/04 10:21
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptで毎月替わる画像
-
HTMLで条件分岐はできますか?
-
Gifアニメ、最後のコマに行った...
-
マウスオーバーとポップアップ...
-
textareaに画像を表示したい
-
Javascriptで指定した日付と時...
-
透過pngの透明部分以外をクリッ...
-
画像クリックで別の場所の画像...
-
JavaScript スライドの画像にリ...
-
JavaScriptでスライドショー
-
FancyZoom (javascriptで画像拡...
-
1枚の画像をクリックすると複数...
-
画像をフォルダから自動読み込み。
-
jQueryスライドショー画像への...
-
画面の表示位置を指定させて表...
-
Javascript で共通の処理をどこ...
-
サムネイルをクリックすると画...
-
MAX関数を使ってからLEFT JOIN...
-
Slick.jsのオプションrtlについて
-
jQueryで、リンクURLの一致を確...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Javascript で共通の処理をどこ...
-
Javascriptで指定した日付と時...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
1枚の画像をクリックして複数の...
-
画像ランダム表示、しかしダブ...
-
スライダーを実装した場合、ペ...
-
1枚の画像をクリックすると複数...
-
HTMLで条件分岐はできますか?
-
JavaScript スライドの画像にリ...
-
オンマウスで、画像切り替え+...
-
画像の重なりの順序を代える方...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
画像をドラッグ&ドロップで移...
-
各フォルダから1枚ずつ画像をラ...
-
jQueryで特定のURLの時のみ表示
-
bxsliderにて読み込み後に内容...
-
prettyphotoの画像表示について
-
WEBページ立ち上げ時に1回のみ...
おすすめ情報