鼠标移动时平滑翻译

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），以便默认启用渲染这些元素。

尝试将这些规则作为默认规则添加到您的动画元素中（在您的情况下为“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

Answer 2

如果您希望软过渡，您应该将它告诉浏览器的某个地方。只需添加此样式并对其进行自定义。在样式表中而不是在事件 JavaScript 中执行此操作。处理所有前缀。

#mainView{
   transition:all 0.5s ease-in;
}