Question

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

我找到了模板中使用的脚本，它为背景图像的滚动效果设置了动画。它如下：

<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

即使考虑尝试调试，该代码也太复杂了。

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

＆＃13;

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);};

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

这里的重要部分是根据我们滚动页面的距离来更新背景位置。范围从center 0%到center 100%。关于背景图像定位的便利之处在于0%表示＆＃34;将图像顶部与元素顶部对齐＃34;并且100%表示＆＃34;将图像底部与元素底部对齐＃34 ;.值在两者之间进行插值，因此25%将＆＃34;将图像的顶部四分之一标记与元素的前四分之一标记对齐＆＃34;。

更简单。

jquery背景图像滚动效果速度问题

1 个答案: