Показать сообщение отдельно
  #9 (permalink)  
Старый 07.07.2018, 09:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,077

вслед за курсором
Malleys,
спасибо за подсказку, вариант без setTimeout
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>

#etsa {
    position: absolute;
    width: 50px; height: 50px; margin: -25px;
    display: flex; justify-content: center;
    background: url(https://us.123rf.com/400wm/400/400/speedfighter/speedfighter1001/speedfighter100100101/6236656-sniper-rifle-target-cross-hairs-silhouetted-on-white-background.jpg) 0 / 50px no-repeat;
    will-change: transform;
    pointer-events: none;
}

body {
    margin: 0;
    overflow: hidden;
}

    </style>
</head>
<body>
    <div class="block" id="block">
        <div id="etsa"></div>
    </div>
    <script>

// cостояние приложения
var x = { current: 0, target: 0 },
    y = { current: 0, target: 0 },
    isBoom = false;


var etsa = document.getElementById("etsa"),
    style = etsa.style;

document.onmousemove = function(e) {
    x.target = e.clientX;
    y.target = e.clientY + 2;
    isBoom = false;
};

function update() {
    x.current += 0.1 * (x.target - x.current);
    y.current += 0.1 * (y.target - y.current);
    style.transform = `translate(${x.current}px, ${y.current}px)`;
    isBoom = Math.abs(x.current - x.target) < .1 &&  Math.abs(y.current - y.target) < .1     
    etsa.textContent = isBoom ? "Boom!" : "";
    style.backgroundImage = isBoom ? "none" : "";
    requestAnimationFrame(update);
}

update();

    </script>
</body>
</html>

Последний раз редактировалось рони, 07.07.2018 в 09:32.
Ответить с цитированием