Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

How to create a moving div using JavaScript ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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


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


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport"
                   initial-scale=1.0" />
        body {
            background-color: aqua;
            display: flex;
            align-items: center;
        .ball {
            height: 12rem;
            width: 12rem;
            background-color: white;
            border-radius: 50%;
            margin-top: 20rem;
    <div class="container">
        <div class="ball"
        let ball = document.getElementById("ballID");
        var myVar = setInterval(spostaDiv, 90);
        var margin = 0;
        let l = window.screen.width;
        let w = 1300;
        function spostaDiv() {
            if (margin == w) {
                margin = 0 + "px";
            } else {
       = margin + "px";
            margin += 10;


My Personal Notes arrow_drop_up
Last Updated : 08 May, 2023
Like Article
Save Article
Similar Reads
Related Tutorials