同一页面上的垂直和水平视差滚动

Question

所以我需要得到这种视差效果到目前为止我已经找到了滚动的水平形式但似乎无法弄清楚滚动到和鼠标滚轮绑定的水平滚动。现在这里是结构如何：

所以使用this教程我已经得到了垂直视差效果。所以然后我尝试修改它以在水平方向添加。这是html：

<!-- Home -->
<section id="home" data-speed="10" data-type="background" class="vertical">
  <article>HOME</article>
</section>

<section id="section3" data-speed="4" data-type="background" style="float:left;" >
  <article>SECTION 3</article>
</section>
<section id="section4" data-speed="4" data-type="background" style="float:left;" >
  <article>SECTION 4</article>
</section>
<div style="clear:both"></div>

<!-- Section #1 -->
<section id="section1" data-speed="4" data-type="background" class="vertical">
  <article>SECTION 1</article>
</section>
<!-- Section #2 -->
<section id="section2" data-speed="4" data-type="background" class="vertical">
  <article>SECTION 2</article>
</section>

现在我创建了一个设置滚动的功能：

function scrolling(direction){
// Cache the Window object
$window = $(window);

$('section[data-type="background"]').each(function(){
 var $bgobj = $(this); // assigning the object

  $(window).scroll(function() {

    switch(direction){            
        case "vertical":
            // 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';
            break;
        case "horizontal":
            var xPos = -($window.scrollLeft() / $bgobj.data('speed')); 
            // Put together our final background position
            var coords = xPos + 'px 50% ';
    }
    // Move the background
    $bgobj.css({ backgroundPosition: coords });

  }); // window scroll Ends

});     
}

我有一个菜单，可以导航到每个部分，首先将它们带到主页部分然后转到所选部分。现在，scrollto是下一个阶段，但我似乎不能只有基本的视差效果，这是我被困在的地方。