TAG
CSS
JavaScript
Result
Run
License
<div id="target">Click me</div>
#target { width: 100px; height: 100px; background-color: #FF0000; color: #FFF; display: flex; align-items: center; justify-content: center; }
window.addEventListener("load", () => { var elTarget = document.querySelector("#target"); var requestId; let x = 0; let direction = "right"; let pause = false; elTarget.onclick = function() { if (!pause) window.cancelAnimationFrame(requestId); else requestId = window.requestAnimationFrame(move); pause = !pause; }; function move(time) { if (x > innerWidth - 100) direction = "left"; if (x < 0) direction = "right"; elTarget.style.transform = `translateX(${direction == "right" ? x++ : x--}px)`; requestId = window.requestAnimationFrame(move); } window.requestAnimationFrame(move); });
Console
expand_less
License
License
by DevDic
Close