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

Question

I am following this parallax tutorial that uses only jQuery. I slightly modified the 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%; 
}

And the 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

 });    

}); 

This code moves everything in a section at the same speed, but I would like to have the <article> text move at a variable speed different (defined in the <article data-speed>) from the background image.

I wasn't sure how to move the text because background-position is for images, and I tried adjusting top but that didn't have any effect. I also tried setting transform: translateZ(); on the article css, but this also did not work.

How can I add different speeds to the <article> texts? I'd also like to stick to jQuery in the spirit of the example.

Answer 1

try modifying markup always wrapping the article with a section, for ex.:

 <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> 

edit--explanation

this is the source of your parallax jquery script:

$(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

    }); 

    }); 

as you can tell what it's doing is slowing down the scroll of the section[data-type="background"] with a factor of data('speed');

This kind of script is built in a way to have one layer of parallax, if you want more parallax layers check wagersfield's parallax script