how to make a smooth block offset as in the example

jQuery(".list-product .card").mousemove( function(e){ var offset = jQuery(this).offset(); var xPos = e.pageX - offset.left; var yPos = e.pageY - offset.top; var mouseXPercent = Math.round(xPos / jQuery(this).width() * 100); var mouseYPercent = Math.round(yPos / jQuery(this).height() * 100); jQuery(this).children('.data-content').each( function(){ var diffX = jQuery('.list-product .item').width() - jQuery(this).width(); var diffY = jQuery('.list-product .item').height() - jQuery(this).height(); var myX = -25 - diffX * (mouseXPercent / 1500); var myY = 25 + diffY * (mouseYPercent / 1080); var cssObj = { 'left': myX + 'px', 'top': myY + 'px' } jQuery(this).animate({left: myX, top: myY},{duration: 50, queue: false, easing: 'linear'}); }); }); 
 .list-product { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -5px; margin-right: -30px; padding: 50px 0 120px; } .list-product .item { padding: 0 30px; max-width: 25%; -webkit-flex-basis: 25%; -ms-flex-preferred-size: 25%; flex-basis: 25%; height: 100%; } .list-product .item .card { height: 185px; position: relative; border: 3px solid #000; } .list-product .item .card .data-content { position: absolute; top: 25px; left: -25px; right: 0; } .list-product .item .card .data-content .data-img { padding-bottom: 185px; width: -webkit-calc(100% - 25px); width: calc(100% - 25px); background-position: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; } .list-product .item .card .data-content h2 { margin: 25px 0 0; font-size: 18px; color: #000; font-weight: 400; text-transform: uppercase; } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="list-product"> <div class="item"> <div class="card"> <div class="data-content" style="left: -23.86px; top: 20.7787px;"> <div class="data-img" style="background-image: url(https://avatars.mds.yandex.net/get-pdb/194708/80fd536d-1d43-4e1a-91d0-be10c85a18b9/s280)"></div> <h2>срезанные цветы</h2> </div> </div> </div> <div class="item"> <div class="card"> <div class="data-content" style="left: -23.824px; top: 23.2157px;"> <div class="data-img" style="background-image: url(https://avatars.mds.yandex.net/get-pdb/194708/80fd536d-1d43-4e1a-91d0-be10c85a18b9/s280)"></div> <h2>горшочные растения</h2> </div> </div> </div> </div>

    2 answers 2

     let $prlx = $('#prlx'), $img = $prlx.find('img'); $img.offset({ 'top': -($img.height() / 2) + ($prlx.height() / 2), 'left': -($img.width() / 2) + ($prlx.width() / 2) }); let startY = $img.offset().top, startX = $img.offset().left, stepY = ($img.height() - $prlx.height()) / 2, stepX = ($img.width() - $prlx.width()) / 2; $prlx.on('mousemove', function (el) { $img.offset({ 'top': startY + (stepY - el.pageY), 'left': startX + (stepX - el.pageX) }); }); 
     #prlx{width:600px;height:300px;overflow:hidden;border:1px solid black;position:relative} #prlx img{position:absolute} 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="prlx"><img src="https://i.ytimg.com/vi/ktlQrO2Sifg/maxresdefault.jpg" /></div>

    • Good, good answer (+) - Alexandr_TT
    • @Alexandr_TT thanks - Kirill Korushkin

    I could not figure out your option, I can offer something like this:

     let images = [...document.querySelectorAll('.data-img')]; window.addEventListener('mousemove', e => { images.forEach(i => { let hw = i.clientWidth/2; let hh = i.clientHeight/2; let x = i.offsetLeft + hw - e.clientX; let y = i.offsetTop + hh - e.clientY; if (Math.abs(x)>hw || Math.abs(y)>hh) return; i.style.backgroundPosition = (50-x/5) + "% " + (50-y/2) + "%" }); }); 
     .data-img { width: 150px; height: 150px; display: inline-block; margin: 10px; transition: 66ms; background-position: 50% 50%; } 
     <div class="data-img" style="background-image: url(https://avatars.mds.yandex.net/get-pdb/194708/80fd536d-1d43-4e1a-91d0-be10c85a18b9/s280)"></div> <div class="data-img" style="background-image: url(https://avatars.mds.yandex.net/get-pdb/194708/80fd536d-1d43-4e1a-91d0-be10c85a18b9/s280)"></div> <div class="data-img" style="background-image: url(https://avatars.mds.yandex.net/get-pdb/194708/80fd536d-1d43-4e1a-91d0-be10c85a18b9/s280)"></div>