鼠标移动使 div 移动平滑反转

Question

我试图通过"轻松"效果使我的div 平滑地反转。

当我将鼠标悬停在div上时，我希望图像能够平稳地远离鼠标，就像他们在toyfight.co网站第一部分中对两个玩具的图像所做的那样。

我已经检查了他们的代码，但找不到我的答案。

你们中有人可以提供吗？

我已经设法用下面的代码对图像进行了稍微粗略的移动。还有一个链接到我在Codepen上的项目。(此处更最小化)

回答这个插件帮助我实现了我的目标

http://www.jqueryscript.net/animation/jQuery-Plugin-For-3D-Perspective-Transforms-On-Mousemove-LogosDistort.html

.HTML

<div class="section-0">
<div class="phone-container" >
<div class="phone-front" id="layer-one"></div>
</div>
</div>
<section class="section-1 parallax parallax-1">

<div class="container" id="section-1">

<div class="text-block animation-element">
<h1>Gemaakt van het fijnste staal</h1>
<p>"The volks is the rare kind of phone that I can recommend without reservations."<br> — The Verge</p>
</div>
</div>
</section>

简讯

$.fn.smoothWheel = function () {
//  var args = [].splice.call(arguments, 0);
var options = jQuery.extend({}, arguments[0]);
return this.each(function (index, elm) {
if(!('ontouchstart' in window)){
container = $(this);
container.bind("mousewheel", onWheel);
container.bind("DOMMouseScroll", onWheel);
currentY = targetY = 0;
minScrollTop = container.get(0).clientHeight - container.get(0).scrollHeight;
if(options.onRender){
onRenderCallback = options.onRender;
}
if(options.remove){
log("122","smoothWheel","remove", "");
running=false;
container.unbind("mousewheel", onWheel);
container.unbind("DOMMouseScroll", onWheel);
}else if(!running){
running=true;
animateLoop();
}
}
});
};

Answer 1

尝试在第 358 行使用.css()而不是.offset()。

所以从：

$(target).offset({ top: y ,left : x });

自：

$(target).css({ top: y ,left : x });

整体效果流畅了很多。代码笔在这里。