javascript - 鼠标移动平滑翻译

Question

我正在尝试像本页那样制作 3D 图层效果: 示例页面: http://cloudraiders.com/

我几乎做了所有的事情，但是有一个无法处理的大问题:

$("#mainView").mousemove(function( event ) {
  //getting mouse dimentions
  var pageX = event.pageX;
  var pageY = event.pageY;
  var mainWidth = $(this).width();
  var mainHeight = $(this).height();
  //
  //console.log(pageX);
  ("#mainView").find("li").each(function( index ) {             
    var depth = $(this).attr("dataDepth");
    var scalable = $(this).attr("scalable");
    var x = pageX*depth;
    var y = pageY*depth;
    var z = 0;      
    var thisScale = mainWidth / mainHeight * 1;
    //setting accelerated webkit transform                  
    $(this).css("-webkit-transform", "translate3d("+x+"%,"+y+"%,"+z+"px"+")");                  
    });
});

问题是，translate3d 不像示例页面那样流畅。它在跳跃。 当我将鼠标移出窗口，然后进入不同的地方时，它只是在跳跃。

我已经在论坛中找到了一些解决方案，但是鼠标移动效果不佳。 任何帮助将不胜感激。

问候!

编辑: 我使用了 Jquery 动画函数:

$(this).animate({ whyNotToUseANonExistingProperty: 100 }, {
  step: function(now,fx) {
  $(this).css('-webkit-transform',"translate3d("+x+"%,"+y+"%,"+z+"px"+")");
},
  duration:100
},'linear');

它几乎可以正常工作，但问题是 Jquery 正在堆叠查询。如果我将鼠标移动很多，动画会持续几分钟。

Answer 1

在处理 css 动画/转换时，请记住一些性能技巧。其中之一是设置一个默认转换值(设置为 0)，以便在默认情况下启用这些元素的渲染。

尝试将您的 css 中的这些规则作为默认规则添加到您的动画元素(在您的情况下为“li”):

         transform: translate3d(0, 0, 0);
 -webkit-transform: translate3d(0, 0, 0);
         transform-style: preserve-3d;
 -webkit-transform-style: preserve-3d;
         backface-visibility: hidden;
 -webkit-backface-visibility: hidden;

另请注意，您答案中链接的网站使用 jquery parallax plugin ，它会为您解决这些加速问题。

这里有一些关于 css 转换/动画加速的资源:

Increase Your Site’s Performance with Hardware-Accelerated CSS

DOM, HTML5, & CSS3 Performance

Related stackoverflow question