懸停在<a>標簽</a>上時基於鼠標的視差中斷

Question

我設置了一個小腳本，使圖像慢慢跟隨鼠標，產生視差效果。 為了讓它感覺不那么笨拙，我添加了一小部分來檢查鼠標是否離開身體，只需重置 animation。 不幸的是，每當我在<a>上使用 hover 時，這個附加功能就會非常短暫地重置視差。 當您將鼠標放在<a>上並立即停止移動鼠標時，效果最為明顯。

我嘗試在$(document).mouseout和$('body').mouseout之間切換無濟於事。

 $.fn.parallax = function(resistance, mouse) { $e = $(this); gsap.to($e, 0.2, { x: -((mouse.clientX - window.innerWidth / 2) / resistance), y: -((mouse.clientY - window.innerHeight / 2) / resistance) }); }; $('body').mousemove(function(e) { $('.mouse-with img').parallax(-10, e); }); $('body').mouseout(function() { gsap.to($('.mouse-with img'), 0.5, { x: 0, y: 0 }); });

 html { font-size: 16px; height: 100%; } body { font-size: 1em; font-family: Arial, Helvetica, Sans-serif; color: #000; line-height: 100%; min-height: 100%; margin: 0px; position: relative; overflow: hidden; overflow-y: auto; }.mouse-with { margin: -150px 0 0 -200px; position: absolute; top: 50%; left: 50%; } a { position: fixed; top: 10px; right: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <div class="mouse-with"> <img src="https://picsum.photos/400/300" alt="" /> </div> <a href="tel:123-456-7890">123 456-7890</a>

Answer 1

您只需要檢查mouseout的relatedTarget是否在body內：

 $.fn.parallax = function(resistance, mouse) { $e = $(this); gsap.to($e, 0.2, { x: -((mouse.clientX - window.innerWidth / 2) / resistance), y: -((mouse.clientY - window.innerHeight / 2) / resistance) }); }; $('body').mousemove(function(e) { $('.mouse-with img').parallax(-10, e); }); $('body').mouseout(function(e) { if (.$(e.relatedTarget).closest('body').is(this)) gsap.to($(',mouse-with img'). 0,5: { x, 0: y; 0 }); });

 html { font-size: 16px; height: 100%; } body { font-size: 1em; font-family: Arial, Helvetica, Sans-serif; color: #000; line-height: 100%; min-height: 100%; margin: 0px; position: relative; overflow: hidden; overflow-y: auto; }.mouse-with { margin: -150px 0 0 -200px; position: absolute; top: 50%; left: 50%; } a { position: fixed; top: 10px; right: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> <div class="mouse-with"> <img src="https://picsum.photos/400/300" alt="" /> </div> <a href="tel:123-456-7890">123 456-7890</a>