How to create a moving div using JavaScript ?

Last Updated : 08 May, 2023

In this article, we will learn to create a moving HTML div using JavaScript. The div will move left to right using HTML, CSS, and JavaScript.

Approach:

We have to create an HTML div and add some CSS to the div using a glass ball.
In CSS, we add some background-color to the body and give some height, width, and color to the div.
Now we will add margin-left to the div using JavaScript. So it will move left to right.
In JavaScript, we grab the div using the id name. And after some interval of time, we will add margin-left to the div.

Example: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <style>
        body {
            background-color: aqua;
            display: flex;
            align-items: center;
        }

        .ball {
            height: 12rem;
            width: 12rem;
            background-color: white;
            border-radius: 50%;
            margin-top: 20rem;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="ball" 
             id="ballID"></div>
    </div>
    <script>
        let ball = document.getElementById("ballID");

        var myVar = setInterval(spostaDiv, 90);
        var margin = 0;

        let l = window.screen.width;
        let w = 1300;

        function spostaDiv() {
            console.log(w);
            if (margin == w) {
                margin = 0 + "px";
            } else {
                ball.style.marginLeft = margin + "px";
            }
            margin += 10;
        }
    </script>
</body>
</html>

Output:

How to stretch div to fit the container ?

saurabh294

Improve

Article Tags :

How to create a moving div using JavaScript ?

Similar Reads

HTML Basic Examples

HTML Structural Examples

HTML Hyperlinks Examples

HTML Table Examples

HTML Form Examples

HTML Frame Examples

HTML Media Based

HTML Questions

Thank You!

What kind of Experience do you want to share?