<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>