jQuery перемещение объектов по параллаксу перемещения мыши - PullRequest
1 голос
/ 13 июля 2020
• 1000 или снизу и слева или справа.

$(document).ready(function () {
    var ps4 = $('#Ps4');
    var watch = $('#Watch');
    var miband = $('#MiBand');
    var cash = $('#Cash');
    var ear = $('#Ear');
    
    ps4.obj = { x: ps4.offset().left, y: ps4.offset().top };
    watch.obj = { x: watch.offset().left, y: watch.offset().top };
    miband.obj = { x: miband.offset().left, y: miband.offset().top };
    cash.obj = { x: cash.offset().left, y: cash.offset().top };
    ear.obj = { x: ear.offset().left, y: ear.offset().top };
    
    $("#Section").mousemove(function (e) {
        
    var ps4_x = ps4.obj.x - (e.pageX - ps4.obj.x) / 40;
    var ps4_y = ps4.obj.y - (e.pageY - ps4.obj.y) / 40;
    
    var watch_x = watch.obj.x - (e.pageX - watch.obj.x) / 40;
    var watch_y = watch.obj.y - (e.pageY - watch.obj.y) / 40;
    
    var miband_x = miband.obj.x - (e.pageX - miband.obj.x) / 40;
    var miband_y = miband.obj.y - (e.pageY - miband.obj.y) / 40;
    
    var cash_x = cash.obj.x - (e.pageX - cash.obj.x) / 40;
    var cash_y = cash.obj.y - (e.pageY - cash.obj.y) / 40;
    
    var ear_x = ear.obj.x - (e.pageX - ear.obj.x) / 40;
    var ear_y = ear.obj.y - (e.pageY - ear.obj.y) / 40;
        
        ps4.offset({ top: ps4_y ,left : ps4_x });
        watch.offset({ top: watch_y ,right : watch_x });
        miband.offset({ bottom: miband_y ,left : miband_x });
        cash.offset({ top: cash_y ,left : cash_x });
        ear.offset({ bottom: ear_y ,right : ear_x });
            });
});
#Section-1 {
  width: 100%;
  height: 500px;
  background: gray;
}

.objects {
  position: absolute;
}

#Section {
    height: 300px;
    width: 300px;
    position: relative;
}

#Watch {
    right: 0;
    top: 0;
}

#Ps4 {
    left: 0;
    top: -180px;
}

#MiBand {
    bottom: 0;
    left: 0;
}

#Ear {
    right: 0;
    bottom: 0;
}

#Cash {
    top: 25px;
    left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="Section">
  <div class="objects" id="Ps4">Ps4</div>
  <div class="objects" id="Watch">Watch</div>
  <div class="objects" id="MiBand">MiBand</div>
  <div class="objects" id="Cash">Cash</div>
  <div class="objects" id="Ear">Ear</div>
</section>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...