使用ScrollTo和Localscroll的视差背景效果

Question

我四处寻找了几个小时，试图弄清楚这一点。我有一个像这个jsfiddle一样建立的网站。

<div id="window">
 <div id="section-wrapper">
     <div id="one" class="section"><p>One</p>
     </div>
     <div id="two" class="section"><p>Two</p>
     </div>
     <div id="three" class="section"><p>Three</p>
     </div>
     <div id="four" class="section"><p>Four</p>
     </div>
     <div id="five" class="section"><p>Five</p>
     </div>
     <div id="six" class="section"><p>Six</p>
     </div>
     <div id="seven" class="section"><p>Seven</p>
     </div>
     <div id="eight" class="section"><p>Eight</p>
     </div>
     <div id="nine" class="section"><p>Nine</p>
     </div>
</div>

我使用ScrollTo和localscroll来导航网站，我想知道如何在部分包装器上实现视差效果，并使背景移动得更慢。无论我看哪里，视差插件和脚本都是基于滚动功能的，但由于我不使用滚动导航，我不知道如何添加效果。

有没有一种方法只处理实际的背景图像，即使用.animate和/或.css到背景位置属性，或者我应该在部分包装器后面放一个元素？我对jquery和javascript还很陌生，但如果有人能给我指明正确的方向，我想我就能弄清楚。我只是不知道从哪里开始。。

Answer 1

将此文件附加到站点的标头https://github.com/markdalgleish/stellar.js/tree/master/src

启动脚本

<script type='text/javascript'>
<!--
(function($) {
    $(document).ready(function() {
        $.stellar({
            horizontalScrolling: false,
            verticalOffset: 40
        });
    });
})(jQuery);
// -->
</script>

现在您需要将下面的标签添加到包装背景的div中

<div data-stellar-background-ratio="0.5">

您可以更新值0.5-它定义了背景图像的速度。