Animate object with mouse cursor X-axis position

Animate object with mouse cursor X-axis position

HTML

<!-- Animate by MouseX position -->
<div class="section_parallax bg-primary p-5">
  <div class="container text-center">
    <h3 class="display-4 w100 text-light"><span class="w500">Animate</span>  by MouseX position</h3>
    <p class="text-light">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <img src="images/scroll1.png" alt="" id="scroll1" class="MscrollM" Mspeed="0.3">
    <img src="images/scroll2.png" alt="" id="scroll2" class="MscrollM" Mspeed="-0.1">
    <img src="images/scroll3.png" alt="" id="scroll3" class="MscrollM" Mspeed="0.05">
  </div>

</div>

JS

window.addEventListener('scroll' , function () {


    var mouseX = 0;
    var mouseY = 0;
    // Animate by MouseX position
    var MscrollM = document.querySelectorAll('.MscrollM');
    MscrollM.forEach(function(Meach){
        const Mspeed = Meach.getAttribute('Mspeed');

        document.addEventListener('mousemove',function(event){
            let MlocaX = Mspeed * event.clientX;
            Meach.style.transform = 'translateX('+MlocaX+'px)';
        } ,false);        
        

    })


})