HTML & CSS

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);        
        

    })


})

One thought on “Animate object with mouse cursor X-axis position

  • I’m not sure where you’re getting your information, but great topic. I needs to spend some time learning much more or understanding more.
    Thanks for excellent info I was looking for this information for my mission.

    댓글달기

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다