在一个简单的 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

在一个简单的 jquery 视差示例中使文本以不同的速度滚动

Making text scroll at different speed in a simple jquery parallax example

html

javascript

css

jquery

parallax