Good day dear. Can you please tell me how to write correctly the function that will monitor the position of the cursor on the screen and shift the blocks (through transform: translateX translateY), but on a limited space for each block? Here is an example.

var bl1 = $(".block1"), bl2 = $(".block2"), bl3 = $(".block3"), bl4 = $(".block4"); var doc = { w: $(window).width(), h: $(window).height(), wC: $(window).width() / 2, hC: $(window).height() / 2 }; var mouse = { x: 0, y: 0 }; $(window).resize(function() { doc = { w: $(window).width(), h: $(window).height(), wC: $(window).width() / 2, hC: $(window).height() / 2 } }); $(window).mousemove(function(e) { mouse.x = ((e.pageX - doc.w + doc.wC) / (doc.wC / 50)); mouse.y = ((e.pageY - doc.h + doc.hC) / (doc.hC / 50)); bl1.css('transform', 'translate(' + mouse.x + 'px, ' + mouse.y + 'px)'); }); 
 .wrappen { position: relative; width: 400px; height: 400px; border: 1px solid #000; margin: 0 auto; } .block1 { position: absolute; top: 50%; left: 50%; margin-left: -75px; margin-top: -75px; background: red; width: 150px; height: 150px; } .block2 { position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; background: gold; width: 100px; height: 100px; } .block3 { position: absolute; top: 50%; left: 50%; margin-left: -40px; margin-top: -40px; background: pink; width: 80px; height: 80px; } .block4 { position: absolute; top: 50%; left: 50%; margin-left: -20px; margin-top: -20px; background: green; width: 40px; height: 40px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrappen"> <div class="block1"> </div> <div class="block2"> </div> <div class="block3"> </div> <div class="block4"></div> </div>

but it is not a bit correct, it would be necessary for me that the first block could shift within the aisles along X (-14 to 14) and Y (from -13 to 12), as if following the cursor, well, with the other blocks it is similar, just b the response reaction was say by + 40ms (with a slight delay) for each new block?

    1 answer 1

    There is an easy way to solve this delay, called Slow Parent.

    For simplicity, I recorded the current deviation in bl.data('x') and bl.data('y') . Then the coordinate will be calculated as the arithmetic average between the current position and the position calculated from the mouse position:

      bl.data('x', (mouse.x + 1*bl.data('x')*(i-1))/i);

    Where i the block number. Total function which will draw a frame of animation:

     function draw() { for (i = 1; i <= 4; i++) { bl=$(".block"+i) bl.data('x', (mouse.x + 1*bl.data('x')*(i-1))/i); bl.data('y', (mouse.y + 1*bl.data('y')*(i-1))/i); bl.css('transform', 'translate(' + bl.data('x') + 'px, ' + bl.data('y') + 'px)'); } }

    The rest is a matter of technique. Create a cross-platform requestAnimationFrame() :

     window.requestAnimFrame = function() { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); } ); }();

    And we do the animation function based on it:

     function animate() { requestAnimFrame(animate); draw(); }

    You can limit the coordinates in this way:

      mouse.x=Math.min(20,Math.max(-20,mouse.x)) mouse.y=Math.min(20,Math.max(-20,mouse.y))

    Work code:

     var bl1 = $(".block1"), bl2 = $(".block2"), bl3 = $(".block3"), bl4 = $(".block4"); var doc = { w: $(window).width(), h: $(window).height(), wC: $(window).width() / 2, hC: $(window).height() / 2 }; var mouse = { x: 0, y: 0 }; $(window).resize(function() { doc = { w: $(window).width(), h: $(window).height(), wC: $(window).width() / 2, hC: $(window).height() / 2 } }); window.requestAnimFrame = function() { return ( window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); } ); }(); function animate() { requestAnimFrame(animate); draw(); } for (i = 1; i <= 4; i++) { $(".block"+i).data('x',0); $(".block"+i).data('y',0); } function draw() { for (i = 1; i <= 4; i++) { bl=$(".block"+i) bl.data('x', (mouse.x + 1*bl.data('x')*(i-1))/i); bl.data('y', (mouse.y + 1*bl.data('y')*(i-1))/i); bl.css('transform', 'translate(' + bl.data('x') + 'px, ' + bl.data('y') + 'px)'); } } animate(); $(window).mousemove(function(e) { mouse.x = ((e.pageX - doc.w + doc.wC) / (doc.wC / 50)); mouse.y = ((e.pageY - doc.h + doc.hC) / (doc.hC / 50)); mouse.x=Math.min(20,Math.max(-20,mouse.x)) mouse.y=Math.min(20,Math.max(-20,mouse.y)) }); 
     .wrappen { position: relative; width: 400px; height: 400px; border: 1px solid #000; margin: 0 auto; } .block1 { position: absolute; top: 50%; left: 50%; margin-left: -75px; margin-top: -75px; background: red; width: 150px; height: 150px; } .block2 { position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; background: gold; width: 100px; height: 100px; } .block3 { position: absolute; top: 50%; left: 50%; margin-left: -40px; margin-top: -40px; background: pink; width: 80px; height: 80px; } .block4 { position: absolute; top: 50%; left: 50%; margin-left: -20px; margin-top: -20px; background: green; width: 40px; height: 40px; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrappen"> <div class="block1"> </div> <div class="block2"> </div> <div class="block3"> </div> <div class="block4"></div> </div>