Move an element with Javascript
Moving an element such as a div with the text “Hello, I'm moving” can be done easily using JavaScript. Here's a basic example to create an animation where the div moves horizontally across the screen: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Moving a Div</title> <style> body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0; } #movingDiv { position: absolute; background-color: #3498db; color: white; padding: 20px; border-radius: 8px; top: 50%; transform: translateY(-50%); left: 0; } </style> </head> <body> <div id="movingDiv">Hello, I'm moving</div> </body> </html> ``` Include the javascript code in the HTML body and see the result at the end ```js const div = document.getElementById('movingDiv'); let position = 0; // Initial position const screenWidth = window.innerWidth; function moveDiv() { if (position >= screenWidth) { position = -div.offsetWidth; // Restart from the left side } position += 2; // Increment position div.style.left = position + 'px'; requestAnimationFrame(moveDiv); // Call the next frame } moveDiv(); ``` **Explanation** 1. **HTML**: - A div with the ID movingDiv is created to display the text. 2. **CSS**: - The div has an absolute position to allow control of scrolling on the horizontal (left) axis. - The layout centers the div vertically. 3. **JavaScript**: - The position variable tracks the horizontal position of the div. - The moveDiv function updates the left property of the div in pixels to move it. - The requestAnimationFrame method is used to create a fluid and efficient animation. When you run this code, the `div` will move from left to right continuously. If you want to stop the movement after a click or create other effects, simply modify the logic in the function.