Ich möchte einen Übergang zur Mausparallaxe hinzufügen

Question

Ich habe an einem Projekt gearbeitet. Dies ist ein Maus Parallax Jquery Code. Im Moment haben die Elemente eine lineare Bewegung. Nach was ich suche ist, nachdem die Maus stoppt, muss die Bewegung für .2 Sekunden fortfahren. Kann mir jemand helfen? Ich habe dafür eine Skriptdatei parallax.min.js verwendet.

(function($) { 
    $.fn.extend({ 
     jParallax: function(opt) { 
      var defaults = { moveFactor: 5, targetContainer: '#parallax' }, 
       o = $.extend(defaults, opt); 
      return this.each(function() { 
       var background = $(this); 
       $(o.targetContainer).on('mousemove', function(e){ 
        mouseX = e.pageX; 
        mouseY = e.pageY; 
        windowWidth = $(window).width(); 
        windowHeight = $(window).height(); 
        percentX = (0-((mouseX/windowWidth)*o.moveFactor) - (o.moveFactor/2)+o.moveFactor)/2; 
        percentY = (0-((mouseY/windowHeight)*o.moveFactor) - (o.moveFactor/2)+o.moveFactor)/2; 
        background[0].style.transform = "translate("+percentX+"%,"+percentY+"%)"; 
       }); 
      }); 
     }     
    }); 
}(jQuery)); 


$('#img1').jParallax({ moveFactor: 5, targetContainer: '#parallax' }); 

$('#img2').jParallax({ moveFactor: 10, targetContainer: '#parallax' }); 

$('#img3').jParallax({ moveFactor: 15, targetContainer: '#parallax' }); 

$('#img4').jParallax({ moveFactor: 20, targetContainer: '#parallax' }); 

$('.main-nav').jParallax({ moveFactor: 0, targetContainer: '#parallax'}); 

$('.logo').jParallax({ moveFactor: 0, targetContainer: '#parallax'}); 

$('.main-banner-text').jParallax({ moveFactor: 0, targetContainer: '#parallax'}); 

$('.social-icons').jParallax({ moveFactor: 0, targetContainer: '#parallax'}); 

Answer 1

Sorry, Hier ist das HTML und CSS

<header id="parallax"> 
     <div class="loader-slider"></div> 
     <nav> 
      <div class="row"> 
       <a href="index.html"><img src="resources/img/Logo.png" class="logo" alt="Markelab Logo"></a> 
       <ul class="main-nav"> 
        <li><a href="#">About<div></div></a></li> 
        <li><a href="#">Services<div></div></a></li> 
        <li><a href="#">Portfolio<div></div></a></li> 
        <li><a href="#">Career<div></div></a></li> 
        <li><a href="#">Contact<div></div></a></li> 
       </ul> 
      </div> 
     </nav> 

<!-- Parallax Elements --> 

     <div> 
      <ul id="scene" onselectstart="return false;" ondragstart="return false;"> 
       <li class="layer" id="img1" data-relative-input="true" data-depth="0.30"><img src="resources/img/parallax/layer1.png"></li> 
       <li class="layer" id="img2" data-relative-input="true" data-depth="0.50"><img src="resources/img/parallax/layer2.png"></li> 
       <li class="layer" id="img3" data-relative-input="true" data-depth="0.60"><img src="resources/img/parallax/layer3.png"></li> 
       <li class="layer" id="img4" data-relative-input="true" data-depth="0.80"><img src="resources/img/parallax/layer4.png"></li> 
      </ul> 
     </div> 

--------------------------- CSS- --------------------------

#parallax { 
    padding-left: 5px; 
    padding-right: 5px; 
    width: 100%; 
} 

#scene{ 
    width: inherit; 
    margin: 0 auto; 
    height: auto; 
    overflow: hidden; 
    display: block; 
    user-select: none; 
} 

#scene li{ 
    list-style: none; 
} 

#scene li a{ 
    text-decoration: none; 
} 

.layer img{ 
    width: 100%; 
    height: auto; 
} 

#img1{position: absolute; top: 29%; left: 33%; margin-right: 30%;} 

#img2{position: absolute; left: 25.1%; top: 41.8%; margin-right: 7%;} 

#img3{position: absolute; left: 13.59%; top: 31.44%; margin-right: 10%;} 

#img4{position: absolute; left: 29.32%; top: 32.73%; margin-right: 5%;}