Screensaver DVD Logo

How to Create a Bouncing DVD Logo Screensaver in JavaScript

Watch the full tutorial here:
Youtube Rumble Odysee

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./main.js" defer></script>
    <title>DVD Screensaver</title>
</head>

<body>
    <img id="img" src="./pngegg.png" alt="">
</body>

</html>

css

* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background: #000;
        overflow: hidden;
    }

    #img {
        background-color: aliceblue;
        position: absolute;
        width: 150px;
        height: auto;
        filter: hue-rotate(0deg);
    }

javascript

const img = document.getElementById('img');
let postX = 100;
let postY = 100;
let velX = 2;
let velY = 2;
let hue = 0;

function move() {
    const screenW = window.innerWidth;
    const screenH = window.innerHeight;
    const imgW = img.offsetWidth;
    const imgH = img.offsetHeight;

    postX += velX;
    postY += velY;

    if (postX + imgW >= screenW || postX <= 0) {
        velX *= -1;
        hue += 60;
    }

    if (postY + imgH >= screenH || postY <= 0) {
        velY *= -1;
        hue += 60;
    }

    img.style.transform = `translate(${postX}px, ${postY}px)`;
    img.style.filter = `hue-rotate(${hue}deg)`;

    requestAnimationFrame(move);
}

move();