06.07.2018, 23:01
|
Интересующийся
|
|
Регистрация: 06.10.2017
Сообщений: 24
|
|
Упростить код движения за мышкой
|
|
06.07.2018, 23:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Роман1479,
setInterval уберите из кода, а лучше никогда не использовать.
https://jsfiddle.net/arvfgkc9/5/
|
|
06.07.2018, 23:20
|
Интересующийся
|
|
Регистрация: 06.10.2017
Сообщений: 24
|
|
Понял, учту, спасибо большое
|
|
06.07.2018, 23:28
|
Интересующийся
|
|
Регистрация: 06.10.2017
Сообщений: 24
|
|
рони,
А какой есть вариант, что-бы если цель(картинка) достигнув курсора появлялась надпись вместо цели(картинки)??
|
|
06.07.2018, 23:49
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Роман1479,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#etsa {
width: 50px;
height: 50px;
background: url(http://us.123rf.com/400wm/400/400/speedfighter/speedfighter1001/speedfighter100100101/6236656-sniper-rifle-target-cross-hairs-silhouetted-on-white-background.jpg) no-repeat;
background-size: 50px 50px;
margin: -25px 0 0 -25px;
position: absolute;
transition: top 0.5s, left 0.5s;
-webkit-transition: top 0.5s, left 0.5s;
}
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div class="block" id="block">
<div id="etsa"></div>
</div>
<script>
var el = document.getElementById('etsa'), timer;
document.onmousemove = function(e) {
window.clearTimeout(timer);
el.style.backgroundImage = ""
el.innerHTML = "";
var X = 0;
var Y = 0;
X = e.clientX;
Y = e.clientY;
el.style.left = X + 'px';
el.style.top = Y + 'px';
timer = window.setTimeout(function() {
el.innerHTML = "boom!!!";
el.style.backgroundImage = "none"
}, 500)
};
</script>
</body>
</html>
|
|
06.07.2018, 23:56
|
Интересующийся
|
|
Регистрация: 06.10.2017
Сообщений: 24
|
|
То что нужно, спасибо
|
|
07.07.2018, 09:05
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
рони, у вас часто меняются параметры анимации, которая не успевает проиграть до конца пока меняется положение курсора, что вместо ease-in-out получается сплайн... что приводит к такому интересному эффекту, когда анимация не успевает проиграть до своего конечного состояния. Мне кажется, что в данном случае лучше не стремиться к какому-то конечному состоянию, а менять параметры анимации всё время...
<!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,
timer;
document.onmousemove = function(e) {
clearTimeout(timer);
timer = setTimeout(function() { isBoom = true; }, 500);
x.target = e.clientX;
y.target = e.clientY;
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)`;
etsa.textContent = isBoom ? "Boom!" : "";
style.backgroundImage = isBoom ? "none" : "";
requestAnimationFrame(update);
}
update();
</script>
</body>
</html>
|
|
07.07.2018, 09:17
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Malleys,
|
|
07.07.2018, 09:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
вслед за курсором
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.
|
|
|
|