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> <script src='app.js'></script> </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.
``` <!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; margin: 0; background-color: #f0f0f0; overflow: hidden; } #movingDiv { position: fixed; background-color: #3498db; color: white; padding: 20px; border-radius: 8px; top: 50%; white-space: nowrap; animation-name: moving; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes moving { 0% { left: 0; transform: translate(-100%,-50%); } 100% { left: 100%; transform: translate(0,-50%); } } </style> </head> <body> <div id="movingDiv">Hello, I'm moving</div> </body> </html> ```
Thank you for understanding us and changing your comment.
I didn't change anything. This is a different thread. Here I modified your code.
what I found most interesting is that in your approach you used only css and not javascript as in the original post. Is the efficiency the same? Have a look at this post too. [1] [https://chat-to.dev/post?id=700](https://chat-to.dev/post?id=700)
Both are efficient enough, so efficiency doesn't matter. In general, simplicity should be the top priority.
I completely agree with you, and this is something I try to do in my work to keep the code very simplified and I can easily maintain it.
no no, i seem to have made a mistake! they're different posts