jQuery 背景动画 - 更好的性能

Question

我正在使用这样的背景动画脚本：

$("body").bind('mousemove', function(e){

    $('#people').css({backgroundPosition: (e.pageX / 15 ) + 'px ' + (e.pageY / 15 - 100 ) + 'px' });
    $('#lady').css({backgroundPosition: (e.pageX / 10 ) + 'px ' + (e.pageY / 10 - 100 ) + 'px' });
    $('#city').css({backgroundPosition: (e.pageX / 30 ) + 'px ' + (e.pageY / 30 - 100 ) + 'px' });

});

一切正常，除了性能......它真的很慢，特别是在歌剧，chrome和 FF ......在 IE 中，一切都非常顺利。有人知道如何让这个小脚本获得更好的性能吗？

你可以在这里查看效果：http://VisualStory.pl/test

Answer 1

mousemove 函数做的工作太多了。每次鼠标移动时都必须完成所有数学和字符串连接。这意味着每个像素。因此，如果我将鼠标移动适中的距离，比如 300px，代码必须执行 300 次。这会影响你的表现。

您可以尝试使用计时器，只是运行数学上说的是每 30 毫秒一次，而不是每次鼠标移动一次。您是否尝试过完全不同的东西，例如 HTML5 canvas？

Answer 2

在您提到的网站上，打开开发控制台，粘贴并执行以下代码：

$('body').unbind('mousemove');
people=$('#people'),lady=$('#lady'),city=$('#city');
people.dest={x:0,y:0},lady.dest={x:0,y:0},city.dest={x:0,y:0},
xPeople=0,yPeople=0,xLady=0,yLady=0,xCity=0,yCity=0;
$('body').bind('mousemove',function(e){
  people.dest={x:e.pageX/15,y:e.pageY/15-100};
  lady.dest={x:e.pageX/10,y:e.pageY/10-100};
  city.dest={x:e.pageX/30,y:e.pageY/30-100};
});
//clearInterval(myIntervalID);
myIntervalID=setInterval(function(){
  people.css({backgroundPosition:parseInt(people.dest.x)+'px '+parseInt(people.dest.y)+'px'});
  lady.css({backgroundPosition:parseInt(lady.dest.x)+'px '+parseInt(lady.dest.y)+'px'});
  city.css({backgroundPosition:parseInt(city.dest.x)+'px '+parseInt(city.dest.y)+'px'});
},16);

上面的代码是否产生了预期的结果？

以下是我对这种方法的拙见：

仅记录/存储 mousemove 方法中的目标值。
然后使用 setInterval（或者更好的 requestAnimationFrame 和 polyfill）将记录的值应用到各个元素。

希望对您有所帮助。

Answer 3

我稍微修改了一段代码，使用了 3D 变换，性能大大提高，现在代码如下所示： var img3 = $('#lady'); var img2 = $('.img2'); var img1 = $('.img1'); var overlay = $('#particles');

overlay.mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 10);
    var amountMovedY = (e.pageY * -1 / 20);
    img3.css({
  '-webkit-transform' : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-moz-transform'    : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-ms-transform'     : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-o-transform'      : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  'transform'         : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)'
});
});

overlay.mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 15);
    var amountMovedY = (e.pageY * -1 / 25);
    img2.css({
  '-webkit-transform' : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-moz-transform'    : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-ms-transform'     : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-o-transform'      : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  'transform'         : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)'
    });

});


overlay.mousemove(function(e){
    var amountMovedX = (e.pageX * -1 / 20);
    var amountMovedY = (e.pageY * -1 / 30);
    img1.css({
  '-webkit-transform' : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-moz-transform'    : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-ms-transform'     : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  '-o-transform'      : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)',
  'transform'         : 'translate3d(' + amountMovedX + 'px,' + amountMovedY + 'px, 0)'
    });



});

jQuery 背景动画 - 更好的性能

jQuery background animation - better performance

performance

animation

background

parallax