平滑平移鼠標移動

我試圖讓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

平滑平移鼠標移動

回答

相關問題