javascript - 在一个简单的 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但这没有任何效果。我也尝试设置 transform: translateZ();在 article 上css，但这也没有用。

如何向 <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

    }); 

    }); 

正如您所知道的，它正在做的是用 data('speed');

这种脚本的构建方式是有一层视差，如果你想要更多的视差层，请查看wagersfield's parallax script