jQuery背景图片滚动效果速度问题

Question

我已经为shopify商店购买了一个模板，该模板以比用户滚动以获得整洁的透视效果慢的速度滚动站点范围内绝对定位的背景图像。

我发现模板中使用的脚本使背景图片的滚动效果更加生动。 如下：

<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>

我遇到的问题是滚动效果快速移动，并且当用户到达他们正在查看的页面底部时，背景图像已过早地被切断。

我一直在寻找这个脚本中的值，试图减慢效果，但没有成功。 有什么见解吗？ 谢谢！ 您可以在我们的网站上查看此脚本的实际运行情况： http : //ts8276eb.myshopify.com/

密码是：yandasmusic

Answer 1

该代码对我来说太复杂了，甚至无法考虑尝试调试。

所以我做了一个简单得多的版本。

 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> 

这里的重要部分是背景位置会根据我们向下滚动的页面进行更新。 范围从center 0%到center 100% 。 关于背景图像定位的方便之处在于0%表示“将图像的顶部与元素的顶部对齐”，而100%表示“图像的底部与元素的底部对齐”。 值插值在中间，因此25%将“使图像的顶部四分之一标记与元素的顶部四分之一标记对齐”。

简单得多。

Answer 2

这些数字似乎在这里很重要：

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

因此，当前滚动速度比页面慢25％。 如果您降低此数字，它将变得更慢...

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