title: Making text scroll at different speed in a simple jquery parallax example
body: <p>I am following this <a href="http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique--net-27641" rel="nofollow">parallax tutorial that uses only jQuery</a>. I slightly modified the HTML:</p>
  
  <pre><code>    &lt;section id="home" data-type="background" data-speed="10"&gt;  
          &lt;article data-speed="1"&gt;One&lt;/article&gt;
          &lt;article data-speed="20"&gt;Two&lt;/article&gt;                          
      &lt;/section&gt;   
  
      &lt;section id="about" data-type="background" data-speed="10"&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>#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%; 
  }
  </code></pre>
  
  <p>And the jQuery:</p>
  
  <pre><code>$(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
  
   });    
  
  }); 
  </code></pre>
  
  <p>This code moves everything in a section at the same speed, but I would like to have the <code>&lt;article&gt;</code> text move at a variable speed different (defined in the <code>&lt;article data-speed&gt;</code>) from the background image. </p>
  
  <p>I wasn't sure how to move the text because <code>background-position</code> is for images, and I tried adjusting <code>top</code> but that didn't have any effect. I also tried setting <code>transform: translateZ();</code> on the <code>article</code> css, but this also did not work.</p>
  
  <p>How can I add different speeds to the <code>&lt;article&gt;</code> texts? I'd also like to stick to jQuery in the spirit of the example.</p>