Javascript + jQuery изображение паралакса с translate3d отстает

Я создал небольшой скрипт, который определяет положение курсора на изображении и немного перемещает изображение с ним, я пытаюсь добиться этого с помощью translate3d(), но его отставание бит и останавливается только когда вы перестаете перемещать курсор.Javascript + jQuery изображение паралакса с 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) –

Вам необходимо удалить свойство перехода. Я могу понять, почему у вас есть это для эффекта зависания в начале, но, возможно, это может быть достигнуто по-другому.

Обновлено скрипку с моим предложением 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

По-прежнему отстает ... проверить его: очень медленно наведите указатель мыши на изображение, затем остановитесь, изображение скатится после того, как вы остановитесь немного. –

О, я понимаете, что вы имеете в виду сейчас. Извините, я думал, что это была игра. Разве это не только то, что у вас есть переход на элемент и на элемент: hover? Итак, вы обновляете свойство transform на mousemove, но есть переход, поэтому он «медленный»? –

Можете ли вы изменить свой андер на это? Это действительно сработало ... Это была такая глупая ошибка, для тестирования я просто удалил переход с зависания, удалив его из галереи. Я согласен с этим после этого, спасибо –

Javascript + jQuery изображение паралакса с translate3d отстает

ответ

Смежные вопросы