title: jquery background image scroll effect speed issue
body: <p>I have purchased a template for my shopify store that scrolls a site wide absolutely positioned background image at a slower speed than what the user scrolls for a neato perspective effect.</p>
  
  <p>I have found the script used in the template that animated the scrolling effect for the background image. It is as follows:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  (function($) {
      if(device.desktop()){
          // PARALLAX INIT
          $(window).bind('scroll',function(e){
              parallaxScroll1();
          });
  
          function parallaxScroll1(){
              var scrolled = $(window).scrollTop();
              $('#wrapper .wrapper_bg').css('top',(0+(scrolled*.75))+'px');
          }
  
          // SMOOTHSCROLL 4 WEBKIT
          var platform = navigator.platform.toLowerCase();
          if (platform.indexOf('win') == 0 || platform.indexOf('linux') == 0) {
              if ($.browser.webkit) {
  
                  /* jquery.simplr.smoothscroll - https://github.com/simov/simplr-smoothscroll */
                  ;(function(e){"use strict";e.srSmoothscroll=function(t){var n=e.extend({step:85,speed:600,ease:"linear"},t||{});var r=e(window),i=e(document),s=0,o=n.step,u=n.speed,a=r.height(),f=navigator.userAgent.indexOf("AppleWebKit")!==-1?e("body"):e("html"),l=false;e("body").mousewheel(function(e,t){l=true;if(t&lt;0)s=s+a&gt;=i.height()?s:s+=o;else s=s&lt;=0?0:s-=o;f.stop().animate({scrollTop:s},u,n.ease,function(){l=false});return false});r.on("resize",function(e){a=r.height()}).on("scroll",function(e){if(!l)s=r.scrollTop()})}})(jQuery);
  
                  /* jquery.mousewheel - https://github.com/jquery/jquery-mousewheel */
                  !function(a){"function"==typeof define&amp;&amp;define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a:a(jQuery)}(function(a){function b(b){var g=b||window.event,h=i.call(arguments,1),j=0,l=0,m=0,n=0,o=0,p=0;if(b=a.event.fix(g),b.type="mousewheel","detail"in g&amp;&amp;(m=-1*g.detail),"wheelDelta"in g&amp;&amp;(m=g.wheelDelta),"wheelDeltaY"in g&amp;&amp;(m=g.wheelDeltaY),"wheelDeltaX"in g&amp;&amp;(l=-1*g.wheelDeltaX),"axis"in g&amp;&amp;g.axis===g.HORIZONTAL_AXIS&amp;&amp;(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&amp;&amp;(m=-1*g.deltaY,j=m),"deltaX"in g&amp;&amp;(l=g.deltaX,0===m&amp;&amp;(j=-1*l)),0!==m||0!==l){if(1===g.deltaMode){var q=a.data(this,"mousewheel-line-height");j*=q,m*=q,l*=q}else if(2===g.deltaMode){var r=a.data(this,"mousewheel-page-height");j*=r,m*=r,l*=r}if(n=Math.max(Math.abs(m),Math.abs(l)),(!f||f&gt;n)&amp;&amp;(f=n,d(g,n)&amp;&amp;(f/=40)),d(g,n)&amp;&amp;(j/=40,l/=40,m/=40),j=Math[j&gt;=1?"floor":"ceil"](j/f),l=Math[l&gt;=1?"floor":"ceil"](l/f),m=Math[m&gt;=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&amp;&amp;this.getBoundingClientRect){var s=this.getBoundingClientRect();o=b.clientX-s.left,p=b.clientY-s.top}return b.deltaX=l,b.deltaY=m,b.deltaFactor=f,b.offsetX=o,b.offsetY=p,b.deltaMode=0,h.unshift(b,j,l,m),e&amp;&amp;clearTimeout(e),e=setTimeout(c,200),(a.event.dispatch||a.event.handle).apply(this,h)}}function c(){f=null}function d(a,b){return k.settings.adjustOldDeltas&amp;&amp;"mousewheel"===a.type&amp;&amp;b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode&gt;=9?["wheel"]:["mousewheel","DomMouseScroll","MozMousePixelScroll"],i=Array.prototype.slice;if(a.event.fixHooks)for(var j=g.length;j;)a.event.fixHooks[g[--j]]=a.event.mouseHooks;var k=a.event.special.mousewheel={version:"3.1.12",setup:function(){if(this.addEventListener)for(var c=h.length;c;)this.addEventListener(h[--c],b,!1);else this.onmousewheel=b;a.data(this,"mousewheel-line-height",k.getLineHeight(this)),a.data(this,"mousewheel-page-height",k.getPageHeight(this))},teardown:function(){if(this.removeEventListener)for(var c=h.length;c;)this.removeEventListener(h[--c],b,!1);else this.onmousewheel=null;a.removeData(this,"mousewheel-line-height"),a.removeData(this,"mousewheel-page-height")},getLineHeight:function(b){var c=a(b),d=c["offsetParent"in a.fn?"offsetParent":"parent"]();return d.length||(d=a("body")),parseInt(d.css("fontSize"),10)||parseInt(c.css("fontSize"),10)||16},getPageHeight:function(b){return a(b).height()},settings:{adjustOldDeltas:!0,normalizeOffset:!0}};a.fn.extend({mousewheel:function(a){return a?this.bind("mousewheel",a):this.trigger("mousewheel")},unmousewheel:function(a){return this.unbind("mousewheel",a)}})});
  
                  $.srSmoothscroll({
                      step: 55,
                      speed: 100,
                      ease: 'swing'
                  });
              }
          };
      };
  })(jQuery);
  &lt;/script&gt;
  </code></pre>
  
  <p>The issue that I am having is that the scrolling effect moves to quickly, and by the time the user has reached the bottom of the page they are viewing, the background image has prematurely cut off.</p>
  
  <p>I have been fidling around with the values in this script, trying to slow down the effect, with no success. Any insights?
  Thanks! You can view this script in action on our site at:
  <a href="http://ts8276eb.myshopify.com/" rel="nofollow">http://ts8276eb.myshopify.com/</a></p>
  
  <p>the password is: yandasmusic</p>