平滑平移鼠标移动

我试图让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是堆叠查询。如果我将鼠标移动很多，动画就像分钟一样。

来源

2014-02-11 calmbird

您的脚本没有 “平稳” 过渡，如果鼠标离开/英寸。将价值观保持在一定的范围内，并尝试逐步从旧到新。另外，转换：所有......它可能不起作用，您使用3d转换，而不是2d。 – cox

当使用CSS动画/转换处理，有考虑一些性能trickt熊。其中之一是设置默认变换值（设置为0），以便默认情况下启用渲染这些元素。

尝试addind（在你的情况下，“李”）的规则为默认在你的CSS到您的动画元素：

  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一些的ressource变换/动画加速：

Increase Your Site’s Performance with Hardware-Accelerated CSS

DOM, HTML5, & CSS3 Performance

Related stackoverflow question

来源

2014-02-11 19:25:03 kirkas

非常感谢！ :) https://github.com/wagerfield/parallax，这个parralax插件只是很好的工作！并通过加速使用trasition。不仅仅是简单的顶部，就像我试过的其他视差插件一样。 – calmbird

如果你期待软转换，你应该把它告诉浏览器。只需添加此样式并对其进行自定义。在样式表中执行，而不是在你的JavaScript中。处理所有的前缀。

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

来源

2014-02-11 19:09:24 Mardie

非常感谢你的回答:)我已经试过了，它不适合mousemove。需要一些脚本。 – calmbird

平滑平移鼠标移动

回答

相关问题