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:
