在簡單的jquery視差示例中以不同的速度滾動文本

Question

我正在關注此parallax tutorial that uses only jQuery。我稍微修改了HTML：

<section id="home" data-type="background" data-speed="10"> 
     <article data-speed="1">One</article> 
     <article data-speed="20">Two</article>       
    </section> 

    <section id="about" data-type="background" data-speed="10"> 
    </section> 

CSS

#home { 
    background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
    height: 1000px; 
    margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
} 

#home article { 
    height: 458px; 
    position: absolute; 
    text-align: center; 
    top: 150px; 
    width: 100%; 
} 

#about { 
    background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; 
    height: 1000px; 
    margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); 
    box-shadow: 0 0 50px rgba(0,0,0,0.8); 
} 

#about article { 
    height: 458px; 
    position: absolute; 
    text-align: center; 
    top: 150px; 
    width: 100%; 
} 

而jQuery的：

$(document).ready(function(){ 
    // Cache the Window object 
    $window = $(window); 

    $('section[data-type="background"]').each(function(){ 
    var $bgobj = $(this); // assigning the object 

     $(window).scroll(function() { 

     // Scroll the background at var speed 
     // the yPos is a negative value because we're scrolling it UP!        
     var yPos = -($window.scrollTop()/$bgobj.data('speed')); 

     // Put together our final background position 
     var coords = '50% '+ yPos + 'px'; 

     // Move the background 
     $bgobj.css({ backgroundPosition: coords }); 

}); // window scroll Ends 

});  

}); 

此代碼在相同速度的部分移動的一切，但我想有<article>文本以不同的速度（在<article data-speed>中定義）從背景圖像移動。

我不知道如何移動文字，因爲background-position是圖像，我試着調整top但沒有任何效果。我也嘗試在article css上設置transform: translateZ();，但這也不起作用。

如何爲<article>文本添加不同的速度？我也希望本例精神堅持jQuery。

Answer 1

嘗試修改標記始終包裹有部分文章，爲前：

<section id="about" data-speed="4" data-type="background"> 
    <article>One</article> 
</section> 
<section id="home" data-speed="20" data-type="background" > 
    <article >Two</article>       
</section> 

編輯 - 解釋

這是您的視差jQuery腳本的來源：

$(document).ready(function(){ 
// Cache the Window object 
$window = $(window); 

$('section[data-type="background"]').each(function(){ 
var $bgobj = $(this); // assigning the object 

    $(window).scroll(function() { 

    // Scroll the background at var speed 
    // the yPos is a negative value because we're scrolling it UP!        
    var yPos = -($window.scrollTop()/$bgobj.data('speed')); 

    // Put together our final background position 
    var coords = '50% '+ yPos + 'px'; 

    // Move the background 
    $bgobj.css({ backgroundPosition: coords }); 

    }); // window scroll Ends 

    }); 

    }); 

因爲你可以分辨出它在做什麼是減慢section[data-type="background"]的滾動因子爲data('speed');

這種腳本是建立在某種程度上具有視差的一層，如果你想要更多的視差層檢查wagersfield's parallax script