Javascript + jQuery圖像paralax與translate3d是滯後

我已經創建了一個小腳本，確定光標在圖像上的位置，並與它移動圖片，我嘗試用translate3d（），但它的滯後一個只有當你停止移動光標時纔會停滯。Javascript + jQuery圖像paralax與translate3d是滯後

的jsfiddle：https://jsfiddle.net/c31k00ve/1/

靈感（警告：聲音）：https://html.nkdev.info/godlike/gallery.html

JS：

(function($) { 
var $gallery = $('.gallery'); 
var relX, relY, $e; 
$gallery.on('mousemove', function(e) { 
    $e = e; 
    window.requestAnimationFrame(test); 
}); 

var test = function() { 
    var $container = $('.container'); 
    var offset = $container.offset(); 
    relX = $e.pageX - offset.left - $container.width()/2; 
    relY = $e.pageY - offset.top - $container.height()/2; 
    $gallery.css({ 
     transform: "translate3d(" + (relX * 0.1) + "px, " + (relY * 0.1) + "px, 0) scale(1.3)" 
    }); 
} 
})(jQuery);

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Development</title> 
    <link rel="stylesheet" type="text/css" href="/style.css" /> 
    <script type="text/javascript" src="/jQuery.js"></script> 
</head> 
<body> 
    <div class="container"> 
     <div class="gallery"></div> 
    </div> 
    <span class="xcoord">a</span> 
    <span class="ycoord">a</span> 
    <script type="text/javascript" src="/script.js"></script> 
</body> 
</html>

CSS：

body { 
    margin: 0; 
} 

.container { 
    position: relative; 
    margin: 50px auto; 
    width: 200px; 
} 
.gallery { 
    height: 200px; 
    width: 200px; 
    background-image: url(https://placekitten.com/g/200/200); 
    transition: 0.5s; 
    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; 
} 
.gallery:hover { 
    transform: scale(1.2); 
    transition: 0.5s; 
} 
.xcoord, .ycoord { 
    display: block; 
}

來源

2017-02-19 Marvin Fischer

更新小提琴好像我的機器上很好，看不出什麼明顯的錯誤與您的代碼。你可以移動var $ container = $（'。container'）;以及函數外的寬度/高度計算，以獲得一些較小的性能優勢。視頻和音頻的頁面有很多，所以它可能只是你的處理器正在掙扎一點。 –

我沒有任何問題，我所展示的頁面完美無瑕，只有我自己的腳本滯後。而且我的電腦肯定夠強大（i7-6700k + GTX1080） –

您需要刪除transition屬性。我可以看到爲什麼你在開始時爲了懸停效果，但也許這可以通過不同的方式實現。

我的建議 https://jsfiddle.net/c31k00ve/4/

.gallery { 
height: 200px; 
width: 200px; 
background-image: url(https://placekitten.com/g/200/200); 
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; 
} 
.gallery:hover { 
    transform: scale(1.2); 
}

來源

2017-02-19 17:33:41

還有滯後......測試一下：將鼠標慢慢移動到圖像上，然後停下來，停下後圖像會跳躍 –

哦，我看到你的意思是現在。對不起，我認爲這是一個表演的事情。是不是隻是你有元素和元素的過渡：懸停？所以你正在更新mousemove的transform屬性，但是有一個轉換，所以它是「慢」？ –

你能編輯你的anwer嗎？這實際上工作......這是一個愚蠢的錯誤，對於測試我剛剛刪除從懸停過渡，從.gallery中刪除它是要走的路。之後我會接受，謝謝 –

Javascript + jQuery圖像paralax與translate3d是滯後

回答

相關問題