Question

我正试图让我的div顺利地以“缓和”效果反转。

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

我检查了他们的代码，但无法找到答案。

你们中有人能提供吗？

我设法做了一个略微粗糙的图像移动，下面的代码。也是link to my project on Codepen。（更小化here）

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

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>

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 here。

鼠标移动使div平滑移动

1 个答案: