jquery background image scroll effect speed issue

Question

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.

I have found the script used in the template that animated the scrolling effect for the background image. It is as follows:

<script type="text/javascript">
(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<0)s=s+a>=i.height()?s:s+=o;else s=s<=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&&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&&(m=-1*g.detail),"wheelDelta"in g&&(m=g.wheelDelta),"wheelDeltaY"in g&&(m=g.wheelDeltaY),"wheelDeltaX"in g&&(l=-1*g.wheelDeltaX),"axis"in g&&g.axis===g.HORIZONTAL_AXIS&&(l=-1*m,m=0),j=0===m?l:m,"deltaY"in g&&(m=-1*g.deltaY,j=m),"deltaX"in g&&(l=g.deltaX,0===m&&(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>n)&&(f=n,d(g,n)&&(f/=40)),d(g,n)&&(j/=40,l/=40,m/=40),j=Math[j>=1?"floor":"ceil"](j/f),l=Math[l>=1?"floor":"ceil"](l/f),m=Math[m>=1?"floor":"ceil"](m/f),k.settings.normalizeOffset&&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&&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&&"mousewheel"===a.type&&b%120===0}var e,f,g=["wheel","mousewheel","DOMMouseScroll","MozMousePixelScroll"],h="onwheel"in document||document.documentMode>=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);
</script>

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.

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: http://ts8276eb.myshopify.com/

the password is: yandasmusic

Answer 1

That code is way too complicated for me to even consider trying to debug.

So I made a much simpler version.

 var wrapper = document.getElementById('wrapper'), checkbox = document.getElementById('scrolleffect'); function parallax() { if( checkbox.checked) { wrapper.style.backgroundPosition = "center " + (this.scrollTop / (this.scrollHeight - window.innerHeight) * 100) + "%"; } else { wrapper.style.backgroundPosition = ""; } } document.body.onscroll = function() {parallax.call(document.body);}; document.documentElement.onscroll = function() {parallax.call(document.documentElement);}; 

 #wrapper { background: #333 url('http://cdn.shopify.com/s/files/1/0810/2125/t/21/assets/body_bg_img.png?677044079657970527') no-repeat scroll center top; color: white; padding: 8px; } .spacer { height: 800px; } body { margin: 0; } 

 <div id="wrapper"> <p>Content!</p> <p style="position: fixed;"><label><input type="checkbox" id="scrolleffect" /> Toggle background scroll effect</label></p> <div class="spacer"></div> <p>More content!</p> <div class="spacer"></div> <p>Content ends</p> </div> 

The important part here is that the background position is updated according to how far down the page we've scrolled. It ranges from center 0% to center 100% . The convenient thing about background image positioning is that 0% means "align top of image with top of element", and 100% means "align bottom of image with bottom of element". Values are interpolated in-between, so 25% would be "align the top quarter mark of the image with the top quarter mark of the element".

Much simpler.

Answer 2

The numbers appear to be crunched here:

$('#wrapper .wrapper_bg').css('top',(0+(scrolled*.75))+'px');

So it currently scrolls 25% slower than the page. If you lower this number, it will go more slowly...

$('#wrapper .wrapper_bg').css('top',(0+(scrolled*.25))+'px');