垂直滚动视差背景效果答案

【问题标题】：Vertical scrolling parallax background effect垂直滚动视差背景效果
【发布时间】：2011-09-22 20:45:48
【问题描述】：

背景

我被要求编写一个脚本，为项目创建垂直滚动视差背景效果。我最初的尝试看起来有点像这样：

(function($){
    $.fn.parallax = function(options){
        var $$ = $(this);
        offset = $$.offset();
        var defaults = {
            "start": 0,
            "stop": offset.top + $$.height(),
            "coeff": 0.95
        };
        var opts = $.extend(defaults, options);
        return this.each(function(){
            $(window).bind('scroll', function() {
                windowTop = $(window).scrollTop();
                if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
                    newCoord = windowTop * opts.coeff;
                    $$.css({
                        "background-position": "0 "+ newCoord + "px"
                    });
                }
            });
        });
    };
})(jQuery);

// call the plugin
$('.lines1').parallax({ "coeff":0.65 });
$('.lines1 .lines2').parallax({ "coeff":1.15 });

此代码确实提供了所需的效果，但滚动事件上的绑定确实会消耗性能。

问题

第 1 部分。如何更改我的插件以提高效率？第 2 部分。是否有任何资源（书籍、链接、教程）可供我阅读以了解更多信息？

【问题讨论】：

有一个工作示例的链接？听起来不错的效果，我想看看。
你有很多泄漏的全局变量。将“use strict”放在main函数的开头，以便在为未定义的变量赋值时获取异常。

标签： javascript jquery

【解决方案1】：

你可以试试：

(function($){
    $.fn.parallax = function(options){
        var $$ = $(this);
        offset = $$.offset();
        var defaults = {
            "start": 0,
            "stop": offset.top + $$.height(),
            "coeff": 0.95
        };
        var timer = 0;
        var opts = $.extend(defaults, options);
        var func = function(){
            timer = 0;
            var windowTop = $(window).scrollTop();
            if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
                newCoord = windowTop * opts.coeff;
                $$.css({
                    "background-position": "0 "+ newCoord + "px"
                });
            }
        };
        return this.each(function(){
            $(window).bind('scroll', function() {
                window.clearTimeout(timer);
                timer = window.setTimeout(func, 1);
            });
        });
    };
})(jQuery);

所以如果有多个滚动事件是顺序的，浏览器不会滚动背景。我在事件处理程序之外写了func，以避免在每个事件中创建一个新的闭包。

【讨论】：

【解决方案2】：

您应该让实际的“滚动”事件处理程序启动一个计时器：

    var opts = $.extend(defaults, options);
    var newCoord = null, prevCoord = null;

    setInterval(function() {
      if (newCoord !== null && newCoord !== prevCoord) {
                $$.css({
                    "background-position": "0 "+ newCoord + "px"
                });
                prevCoord = newCoord;
       }
    }, 100);

    return this.each(function(){
        $(window).bind('scroll', function() {
            windowTop = $(window).scrollTop();
            if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
                newCoord = windowTop * opts.coeff;
            }
            else
                prevCoord = newCoord = null;
        });
    });

或者类似的东西。这样，您每秒最多只能进行 10 次 DOM 操作。

【讨论】：

好主意。我要补充的一件事是，您可以将单个处理程序绑定到滚动事件并从那里为各个元素分派函数。至少可以省去调用scrollTop 方法的工作量，这不是微不足道的。
是的，这很好。我的总体主题是，您几乎不想在“scroll()”处理程序中做任何事情，因为浏览器会生成无数个。

【解决方案3】：

你可以做的一件事是：

            $(window).bind('scroll', function() {
                windowTop = $(window).scrollTop();
                if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
                    newCoord = windowTop * opts.coeff;
                    $$.css({
                        "background-position": "0 "+ newCoord + "px"
                    });
                }
            });

您可以在 scroll 事件之外创建窗口 jQuery 对象。

        $window = $(window); //create jQuery object
        $window.bind('scroll', function() {
            windowTop = $window.scrollTop();
            if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
                newCoord = windowTop * opts.coeff;
                $$.css({
                    "background-position": "0 "+ newCoord + "px"
                });
            }
        });

【讨论】：