2つの視差の背景を切り替える

Question

ウェイポイントを使用して2つの視差の背景を切り替える必要があります。 Chromeではすべて正常に動作しますが、問題は他のブラウザにも表示されます。

• Firefox：背景画像を切り替えると、次の背景がサイト上の他のすべての要素より1秒間表示されます。

• Safariでは、多くの遅延があります。

編集今の例を働い： http://codepen.io/rajjejosefsson/pen/vXVYNL

.background_fill { 
    overflow: hidden; 
    position: relative; 
} 

.background_fill:before { 
    top: 0; 
    background-color: white; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    z-index: -1; 
    content: " "; 
    position: fixed; 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://www.w3schools.com/css/trolltunga.jpg'); 
    will-change: transform; 
    width: 100%; 
    height: 100%; 
} 

.background-render { 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('http://hdwallpaperia.com/wp-content/uploads/2013/11/Mobile-Wallpapers-HD-640x400.jpg'); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: -1; 
    will-change: transform; 
    pointer-events: none; 
} 

Answer 1

を私はちょうどショー（）および非表示（）関数からのparamsを取り出して、それがFFとSafariで正常に動作し始めました。

Showおよびhide関数は、このような引数を受け入れません。 .background_fillは無効です。

結果はJavaScript：また

$(".background_fill").hide(); 

$(document).ready(function() { 

    /* new hidden background */ 

    $('.js_show_new_bg').waypoint(function(direction) { 

    if (direction === "down") { 
     $(".background_fill").show(); 
    } else { 
     $(".background_fill").hide(); 
    } 
    }, { 
    offset: '1%' 
    }); 

}); 

あなたのコード簡素化するためにtoggle機能を使用することができます。代わりにこのコードの

$(".background_fill").toggle(direction === "down"); // true = show, false = hide 

：

if (direction === "down") { 
    $(".background_fill").show(); 
} else { 
    $(".background_fill").hide(); 
}