鼠标移动让div移动顺利翻转

我试图让我的div移动顺畅地与“缓动”效果相反。鼠标移动让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(); 
       } 

      } 
     }); 
    };

来源

2017-04-15 Salman

您的图像似乎顺利移动到我身上。有什么问题？ –

ToyFights网站上的一个似乎有一个缓动的效果，这使得它非常流畅 – Salman

我建议你用CSS转换来做到这一点，它允许缓动效果，并且比使用JavaScript的效果简单得多。 –

尝试使用.css()代替.offset()上线358

所以从：

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

到：

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

整体效果顺畅了很多。 CodePen here。

来源

2017-04-19 01:35:28

我可以从那里工作，谢谢！ – Salman

鼠标移动让div移动顺利翻转

回答

相关问题