10

私はウェブサイトのデザインに取り組んでおり、読み込みが完全に完了したときに body タグの背景画像をフェードインする方法が必要です (おそらく 500 ミリ秒の一時停止)。

Augustの Web サイトのデザインを見ると、背景がフェードインするのがわかります。ただし、これは Flash 背景で行われます。jQueryまたはJavaScriptでこれを行う方法はありますか?

2010 年 9 月 19 日更新:

したがって、Google から来ている人たちのために (これは現在、「読み込み時にバックグラウンドでフェードインする」という結果の第 1 位です。すべての人のために、より明確な実装例を作成したいと思いました。

コードのフッターのどこかにa を追加<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 が必要です)。

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

#backgroundfadeこれには、 DOM の完了時に 1 秒で要素 (実際の背景を「覆う」ボックス)をフェードアウトさせる効果があります。

4

6 に答える 6

4

はい:

ボディに背景画像を与えないでください。次に、フェード効果のあるアニメーション GIF を用意します。Javascript の場合:

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

jQueryでは次のようになります

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

アニメーション GIF トリックを実行したくないが、JPEG や PNG のサポートが必要な場合は、面倒です。placeholder を作成<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-28T18:22:34.483 に答える
2

私はこれを自分でやったことはありませんが、うまくいくかもしれません。

背景画像を設定してから、黒い背景を持つ大きな古い div でマスクすることができると思います。次に、この div の不透明度を操作して、フェード効果を作成します。この黒い div は、体全体を覆う必要があります。

于 2009-06-28T18:34:11.407 に答える
2

背景画像をフェードインさせる方法があるかどうかはわかりませんが、それを行う方法の 1 つは、負の 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:

$(window).load(function() {

    $("#backgroundImage").fadeIn("slow");
});
于 2009-06-28T18:35:22.560 に答える
2

このリンクが表示されます。

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

アイデアは次のとおりです。

低い z インデックス、絶対配置、および背景が割り当てられた div に背景を適用します (逆/バック モーダルと考えてください)。次に、透明な背景を持つ別のレイヤーにコンテンツを生成します....

最下層を ID で参照し、不透明度を変更できるようになりました。

必要なのは、レイヤーにプロパティとして適用する背景メイジのスタック/配列だけです...

于 2009-06-28T18:36:44.727 に答える
0

既製のスクリプトを使用してみませんか。これは、ページの読み込み時に背景画像をフェードインさせます。

また、画像をウィンドウのサイズに合わせますが、必要がない場合は無効にすることができます。

于 2010-07-08T00:21:33.770 に答える
-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-08T12:20:11.427 に答える