Source Code:
(back to article)
Submit
Result:
Report an issue
<head> <style> #square { width: 50px; height: 50px; background-color: purple; position: absolute; left: 0; top: 0; } </style> </head> <body> <div id="square"></div> <script> const square = document.getElementById('square'); let pos = 0; function changeColor(progress) { let red = Math.floor(255 * progress); let green = Math.floor(255 * (1 - progress)); return `rgb(${red}, ${green}, 0)`; } function animate() { if (pos < window.innerWidth - 50) { pos += 2; let progress = pos / (window.innerWidth - 50); square.style.left = pos + 'px'; square.style.backgroundColor = changeColor(progress); requestAnimationFrame(animate); } } animate(); </script> </body>