Question

我创建了一个小脚本，用于确定光标在图像上的位置并稍微移动图片，我尝试用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;
}

Answer 1

您需要删除过渡属性。我可以看到为什么你在那里有悬停效应，但也许可以通过不同的方式实现。

更新了我的建议 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);
}

与translate3d的Javascript + jQuery图像paralax是滞后的

1 个答案: