鼠标移动使div移动平稳。

Question

我正试图使我的div顺利倒转与“轻松”的效果。

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

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

你们中有人能提供吗？

我已经做了一个稍微粗糙的图像移动与下面的代码。也是一个链接到我在Codepen上的项目。(更小的这里)

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

http://www.jqueryscript.net/animation/jQuery-Plugin-For-3D-Perspective-Transforms-On-Mousemove-LogosDistort.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>

JQUERY

  $.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 });

总体效果要顺利得多。CodePen 这里.