javascript - Parallax background effect with ScrollTo and Localscroll -
javascript - Parallax background effect with ScrollTo and Localscroll -
i have looked around hours trying figure out. have site built 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 utilize scrollto , localscroll navigate site , wonder how can implement parallax effect section wrapper , create background move slower. everywhere parallax plugins , scripts based on scroll function, since dont utilize scroll navigate have no thought how add together effect.
is there way adress actual background-image, i.e. utilize .animate and/or .css background-position property or should set element behind section-wrapper? im new jquery , javascript if point me in right direction think figure out. have have no thought start..
attach file header of site https://github.com/markdalgleish/stellar.js/tree/master/src
initiate script
<script type='text/javascript'> <!-- (function($) { $(document).ready(function() { $.stellar({ horizontalscrolling: false, verticaloffset: 40 }); }); })(jquery); // --> </script>
now need add together tag below div wraps background
<div data-stellar-background-ratio="0.5">
you can update value 0.5 - defines speed of background image.
javascript jquery css parallax scrollto
Comments
Post a Comment