ロード時に背景をフェードインする方法はありますか？

私はウェブサイトのデザインに取り組んでいます。ボディタグが完全に読み込まれたら（おそらく500ミリ秒の休止の後）、ボディタグの背景イメージをフェードインする方法が必要です。ロード時に背景をフェードインする方法はありますか？

Augustのウェブサイトのデザインが表示されている場合、背景がフェードインします。ただし、これはフラッシュバックグラウンドで実行されます。 jQueryやJavaScriptでこれを行う方法はありますか？

アップデート2010年9月19日：Googleのから来ているもののためにそう

（これは現在「負荷の背景にフェードイン」のナンバーワン結果であり、私はちょうど私が」と思いました皆のためのより明確な実施例を作るdは。

はフッターにどこかに自分のコードに<div id="backgroundfade"></div>を追加します（あなたのDOMが雑然となってしたくない場合は、また、JavaScriptでこれを追加することができます。

を以下のようなスタイル - そして、

#backgroundfade { 
    position: fixed; 
    background: #FFF /* whatever color your background is */ 
    width: 100%; 
    height: 100%; 
    z-index: -2; 
}

JavaScriptのスクリプトファイル（jQueryのが必要）にこれを追加します。これは、（実際の背景を「カバーする」ボックス）#backgroundfade要素をフェーディングの効果を持つ

$(document).ready(function() { 
    $('#backgroundfade').fadeOut(1000); 
});

DOMの完了時に1秒で終了します。

出典

2009-06-28 Brandon Wang

は申し訳ありませんが、私はあなたの例のサイト –

にフェージング何も表示されません。 @victor、WFM on Chrome –

Firefox-Intrepid Ibex –

私はこれを自分自身を行っていないが、それがうまくいくかもしれません。

背景画像を設定して、黒い背景を持つ大きな古いdivでマスクすることができます。次に、このdivの不透明度で再生してフェード効果を作成します。この黒い部分は体全体を覆わなければならないでしょう。

出典

2009-06-28 18:34:11

です。これはJSが有効になっていないユーザーのために働かなければならないので、これが最良の方法だと思います。 –

イエス：

体に背景画像を与えないでください。その後、フェーディング効果を持つアニメーションGIFを準備します。 JavaScriptで：jQueryので

document.onload = function() { 
    window.setTimeout (function() { 
    document.getElementsByTagName ("body")[0].style.backgroundImage = "url(/path/to/image.gif)"; 
    }, 500); 
};

それはあなたがアニメーションGIFのトリックをしたいが、JPEGまたはPNGのサポートを必要としない場合、それはのは厄介な取得

$(function() { 
    $('body').css ('backgroundImage', 'url(/path/...)'); 
});

だろう。プレースホルダ<div/>を作成し、適切な場所に配置して不透明で再生する必要があります。また、背景画像がロードされたことを検出する必要があるため、低速接続では愚かなジャンプをしません。非作業例：

var x = new Image(); 
x.onload = function() { 
    /* 
    create div here and set it's background image to 
    the same value as 'src' in the next line. 
    Then, set div.style.opacity = 0; (best, when the 
    div is created) and let it fade in (with jQuery 
    or window.setInterval). 
    */ }; 
x.src = "/path/to/img.jpg";

乾杯、

出典

2009-06-28 18:22:34 Boldewyn

@Boldewynでは、コメントを投稿するのではなく質問を編集したいと思う。 BTW nice avatar;） –

done、ありがとうございます（私のアバター;-)へのコメント）。 – Boldewyn

@Brandon Wang、私は完全なコードのBoldewynソリューション（2番目の部分）を設計しました。私の答えは – Kalinin

バックグラウンド画像をフェードインする方法があるかどうかはわかりませんが、負のZ-インデックスを持つ絶対的に配置された画像を使用する方法があります。その後、jqueryを使用してイメージをフェードインできます。この手法は、背景画像をタイル化または繰り返す必要がある場合は、手間がかかる場合があります。

HTML：

<body style="z-index: -2"> 
<img src="backgroundImage.jpg" id="backgroundImage" style="position: absolute; top: 0px; left: 0px; z-index: -1; display: none;"> 
<!-- The rest of your HTML here --> 
</body>

のjQuery：

AP：アイデアがある

http://fragged.org/dev/changing-and-fading-body-background-image.php

私は、このリンクを参照してください

$(window).load(function() { 

    $("#backgroundImage").fadeIn("slow"); 
});

出典

2009-06-28 18:35:22

$（document）ready（）の代わりに$（window）.load（）を使用してください。イメージがすでに読み込まれていることを確認してください。そして、この方法は私のアプローチと同等です（ページのセマンティクスを法とする）。 – Boldewyn

もう一つの問題：z-index：-1は、img go **をbody要素の背後に**します。ボディーに背景が適用されている場合、imgは表示されません。 z-indexをスキップして、img要素があなたの体の最初の要素であることを確認するだけで十分です。 – Boldewyn

そうです、サンプルコードを変更しました。私は実際に、レンダリングされたページと同じ大きさのdivを作成し、それを消してしまう（バックグラウンドの繰り返し/背景の問題を処理する）ソリューションが好きです。あなたは、あなたのdivが十分に大きいかどうかを確認するか、ドキュメント全体のoffsetHeightとoffsetWidthを使用する必要があります。 –

、低いZインデックス、絶対的な位置付けと背景を割り当てられたdivにあなたの背景を追加します（これを逆/後のモーダルと考える）。透明な背景を持つその上の別のレイヤーにコンテンツを作成します。

これで、下位レイヤーをIDで参照し、不透明度を変更できるようになりました。

それが必要とするすべては、バックグラウンドのスタック/配列層にプロパティとして適用するメイジです...

出典

2009-06-28 18:36:44

既製のスクリプトは使用しない理由：this oneは、ページの読み込みに背景画像フェードインを作成します。

イメージはウィンドウのサイズにも適合しますが、必要でない場合は無効にすることができます。

出典

2010-07-08 00:21:33 Erwan

-1

私のソリューション：

HTML：

<img id='myImg' />

CSS：

#myImg{ 
    opacity: 0;    
    -moz-opacity: 0;   
    -khtml-opacity: 0;  
    filter: alpha(opacity=0); 
}

JS：

var img = document.getElementById('myImg'), 
    steps = 30, 
    appearTime = 1000; 

img.src = "/path/to/img.gif"; 

img.onload = function(){ 
    for(i=0; i<=1; i+=(1/steps)){ 
     setTimeout((function(x){ 
      return function(){ 
       img.style.opacity = x; 
       img.style.MozOpacity = x; 
       img.style.KhtmlOpacity = x; 
       img.style.filter = "alpha(opacity=" + (x*100) + ")";      
      }; 
     })(i), i*appearTime); 

    }; 
};

出典

2010-11-08 12:20:11 Kalinin

彼は画像ではなく背景の画像を消したい。 –

ロード時に背景をフェードインする方法はありますか？

答えて

関連する問題