Упростить код движения за мышкой
Добрый день, может я уже на это форуме всем надоел, но нужна помощь. Движение за мышью. Не понятно себя ведет прицел, может кто помочь?
https://jsfiddle.net/roman1479/arvfgkc9/:help: :help: :help: |
Роман1479,
setInterval уберите из кода, а лучше никогда не использовать. https://jsfiddle.net/arvfgkc9/5/ |
Понял, учту, спасибо большое
|
рони,
А какой есть вариант, что-бы если цель(картинка) достигнув курсора появлялась надпись вместо цели(картинки)?? |
Роман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> |
То что нужно, спасибо:)
|
рони, у вас часто меняются параметры анимации, которая не успевает проиграть до конца пока меняется положение курсора, что вместо 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> |
Malleys,
:thanks: |
вслед за курсором
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> |
Часовой пояс GMT +3, время: 23:35. |