How to create a moving div using JavaScript ?
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:
Last Updated :
08 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...