鼠標移動讓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移動順利翻轉

回答

相關問題