2

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

在此处输入图像描述

所以使用本教程我已经降低了垂直视差效果。所以然后我尝试修改它以添加水平。这是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

});     
}

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

4

0 回答 0