Обработчик события на mousemove
 

Добрый день уважаемые. Подскажите пожалуйста, как написать правильно функцию которая будет следить за положением курсора на экране и смещать блоки (через transform: translateX translateY), но на ограниченное пространство для каждого блока? Вот пример https://jsfiddle.net/q3kgurd3/ но он немного не корректен, мне необходимо что б первый блок мог смещаться в приделах по Х ( -14 до 14) и по Y ( от -13 до 12), как бы следя за курсором, ну и с остальными блоками аналогично, только что б реакция отклика была скажем по +40мс (с небольшой задержкой) на каждый новый блок? :)

Black_Star,
А как такой вариант?

$(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)');
            bl2.css('transform', 'translate(' + (mouse.x * 0.8) + 'px, ' + (mouse.y * 0.8) + 'px)');
            bl3.css('transform', 'translate(' + (mouse.x * 0.6) + 'px, ' + (mouse.y * 0.6) + 'px)');
            bl4.css('transform', 'translate(' + (mouse.x * 0.4) + 'px, ' + (mouse.y * 0.4) + 'px)');

        });

правда, размеры блоков я немного подровнял

.block1
        {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -80px;
            margin-top: -80px;
            background: red;
            width: 160px;
            height: 160px;
        }
        
        .block2
        {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -60px;
            margin-top: -60px;
            background: gold;
            width: 120px;
            height: 120px;
        }
        
        .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;
        }

Да, спасибо. Помогло) https://codepen.io/BlackStar1991/pen/ybeaxR

Black_Star,
Нравятся мне ваши макеты - полностью конкретизирована проблема.
Ну и конечная реализация - красиво!