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(); css上设置article，但这也无效。

如何为<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视差示例中以不同的速度滚动文本

1 个答案: