Learn to create a classic screensaver effect in pure JavaScript. In this video, you will learn how to create the moving ball animation using JavaScript.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Classic Screensaver in JS</title>
</head>
<body>
<script type="text/javascript">
var ball = document.createElement("img");
document.body.appendChild(ball);
ball.src = "ball.png";
ball.style.width = "80px";
ball.style.left = "0px";
ball.style.top = "0px";
ball.style.position = "absolute";
var boundX = window.innerWidth;
var boundY = window.innerHeight;
var speed = 10;
var x = 1;
var y = 1;
function screensaver () {
var posX = ball.offsetLeft;
var posY = ball.offsetTop;
if(posX + ball.offsetWidth > boundX || posX < 0){
x *= -1;
}
if(posY + ball.offsetHeight > boundY || posY < 0){
y *= -1;
}
ball.style.left = ball.x + (speed * x) + 'px';
ball.style.top = ball.y + (speed * y) + 'px';
setTimeout(screensaver, 20);
}
screensaver();
</script>
</body>
</html>