Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Define the styles for the square element */
        #square {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="square"></div>

    <script>
        // JavaScript code for animation
        const square = document.getElementById("square");
        let positionX = 0;
        let animationSpeed = 2; // You can adjust the speed

        function moveSquare() {
            // Update the position of the square
            positionX += animationSpeed;
            square.style.left = positionX + "px";

            // If the square reaches the end of the screen, reset its position
            if (positionX >= window.innerWidth) {
                positionX = 0;
            }

            // Request the next animation frame
            requestAnimationFrame(moveSquare);
        }

        // Start the animation loop
        moveSquare();
    </script>
</body>
</html>
Editor is loading...