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

鼠标移动时平滑转换

2 个答案: