Эффект Parallax с эффектом 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 для свойства background-position или добавить элемент за оболочку раздела? Я довольно новичок в 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 - оно определяет скорость фонового изображения.