javascript - 我想为鼠标视差添加轻松过渡

Question

我一直在做一个元素。这是鼠标视差 jquery 代码。此时，元件进行线性运动。我正在寻找的是鼠标停止后运动必须继续 0.2 秒。任何人都可以帮忙吗？我为此使用了 parallax.min.js 脚本文件。

(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

抱歉，这是 html 和 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%;}