フェード背景画像

Question

私は、X秒ごとに私のウェブサイトの背景画像を変更するための簡単なスクリプトを使用しています。私がしたいのは、ある種のフェードアニメーションや、ある画像から次の画像への移行を組み込むことです。これを達成する最良の方法は何ですか？

私はJavascriptであまり良くありませんので、私に同行してください。 :)

<script type="text/javascript"> 
    var images = ['bg1.png', 'bg2.png', 'bg3.png']; 
    var curImage = 0; 
    function switchImage() 
    { 
     curImage = (curImage + 1) % images.length 
     document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')' 
    } 
    window.setInterval(switchImage, 5000); 
</script> 

私はそう、私はコピー＆ペーストして、この厄介な仕事を取り除くことができますので、誰かが私に作業コードをお願いしてください何度も読んで理解していけません。 example here http://preferredmerchantservices.net/

Answer 1

このような種類のアニメーションをこれ以上達成するには、昔ながらのjsスクリプトを使用している人はいません。基本的にブラウザのjavascript機能の抽象レイヤーであるjQueryや他のjavascriptライブラリーを使用することをお勧めします。

また、あなたが言及したようなトランジションエフェクトのサンプル、プラグインなどを見つけることができます。

1. トランジションエフェクトのプラグイン：本当に簡単とそれを学ぶために私のために数日を要しているhttp://malsup.com/jquery/cycle/
2. jQueryのウェブサイト、：http:///www.jquery.com

はそれがお役に立てば幸いです。

Answer 2

• CSSの背景
• が第二の画像にゼロ不透明
• フェードを使用してDIV第二「の前景」の画像を入れて、あなたのイメージ
• があなたのイメージを設定するのと同じ寸法のDIVを作ります
• スワップイメージ - >することゼロ
• スワップnの前景画像と前景画像の不透明度を設定DIV
• のCSS背景ちょうどあなたがjQueryのために書き換えのコードを必要とする場合における内線1
• 繰り返し

Answer 3

。ここに行く：

<script type="text/javascript"> 
    var images = ['bg1.png', 'bg2.png', 'bg3.png']; 
    var curImage = 0; 
    var timer; 
    function switchImage() { 
     $('body').css({'backgroundImage':'url(images/' + images[curImage] + ')'}; 
     curImage == images.length? curImage = 0; curImage++; 
     clearInterval(timer); 
     timer = setInterval(switchImage, 5000);   
    } 
    timer = setInterval(switchImage, 5000);   
</script> 

これは、背景画像をフェードイン/アウトしないことに注意したいと思います。これを行うには、背景画像用のコンテナを使用できます。多分、サイズ変更時に調整するもの。

// Resize Handler 
$(window).resize(function() { 
    resizePages(); 
}); 

function resizePages() { 

    var width = $(window).width(); 
    var height = $(window).height(); 

    $('.backgroundContainer').css({'width': width}); 

    /* 
     .contentWrapper would be where all your page's content is placed 
     .backgroundContainer is a class for a div placed out side teh contentWrapper 
     It would have a lower z-index than .contentWrapper but higher than body. 
    */ 


    /* 
     This makes sure that the background image is the same height as 
     either the windows of the .contentWrapper (whichever is larger) 
    */ 
    if (height > $('.contentWrapper').height()){ 
     $('.backgroundContainer').css({'height': height}); 
    } else { 
     $('.backgroundContainer').css({'height': $('.contentWrapper').height()}); 
    } 
} 

次に、スイッチコードを調整して、トランジション間の背景をフェードアウトさせることができます。