垂直滾動視差背景效果

Question

背景

我被要求編寫一個腳本，該腳本將為項目創建垂直滾動視差背景效果。 我最初的嘗試看起來像這樣：

(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部分。是否可以閱讀任何資源（書籍，鏈接，教程）以了解更多信息？

Answer 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 ，以避免在每個事件中創建新的閉包。

Answer 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操作。

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