Parallax background effect with ScrollTo and Localscroll

Question

I have looked around for hours trying to figure this out. I have a site built up like this 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>

I use ScrollTo and localscroll to navigate the site and I wonder how I can implement a parallax effect to the section wrapper and make the background move slower. Everywhere I look the parallax plugins and scripts is based on a scroll function, but since I dont use scroll to navigate I have no idea how to add the effect.

Is there a way to only adress the actual background-image, ie use .animate and/or .css to background-position property or should I put an element behind the section-wrapper? Im fairly new to jquery and javascript but if anyone could point me in the right direction i think i could figure it out. I have just have no idea where to start..

Answer 1

Attach this file to header of your site https://github.com/markdalgleish/stellar.js/tree/master/src

initiate the script

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

now you need to add the tag below to div that wraps the background

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

You can update the value 0.5 - it defines the speed of background image.