How do you code a moving image on HTML | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 9

How do you code a moving image on HTML

Making a transition image

1st Nov 2018, 10:59 AM
Effiong Anietie
Effiong Anietie - avatar
11 Answers
+ 10
It's more with CSS or JS that you do this kind of things by using for exemple: (CSS) _transition-property _transition-duration _transition-timing-fonction
1st Nov 2018, 11:37 AM
HAN Fiden
HAN Fiden - avatar
+ 7
<!DOCTYPE html> <html> <head> <style> #image{ height:100px; width:100px; } </style> <title>Moving an image</title> </head> <body> <marquee> <img src="" id="image"> </marquee> </body> </html
1st Nov 2018, 1:50 PM
OM KASHYAP - avatar
+ 6
As Daydream said this is going to be a CSS or JS job. If you want control use JS, otherwise go with css. Css will look like (using keyframes): img{ animation-name: MoveMe animation-duration: 5s animation-fill-mode: both } @keyframes MoveMe { from{left: 0px} to{left: 800px} } Tweak as needed, and JS would look like: function MoveMe(){ let image = document.getElementById("myImageId"); for(let i = 0; i < 800; i++;){ = i + 'px'; } } Html is stricly mark up, no style, animation, interactivity, just the content itself. Style is added by CSS and interactivity and manipulation is added by JS.
1st Nov 2018, 5:47 PM
Brandon - avatar
+ 3
<!DOCTYPE HTML> <html> <head> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text",; } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text");; } </script> </head> <body> <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid black; width:200px; height:200px"></div> <img id="image" src="sample.jpg" draggable="true" ondragstart="drag(event)" width="150" height="50" alt="" /> </body> </html>
2nd Nov 2018, 7:29 AM
Вадим Иванов
Вадим Иванов - avatar
+ 1
The HTML <marquee> element is used to insert a scrolling area of text. You can control what happens when the text reaches the edges of its content area using its attributes. Obsolete This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it. better use CSS and JavaScript
2nd Nov 2018, 9:19 AM
Javier Arjona
Javier Arjona - avatar
+ 1
It's more with CSS or JS that you do this kind of things by using for exemple: (CSS) _transition-property _transition-duration _transition-timing-fonction
25th Feb 2021, 4:37 AM
Aqsa - avatar
2nd Nov 2018, 1:21 AM
Usman Malik
Usman Malik - avatar
if you are talking about character walk circle you should probably see this link I hope this will help you
2nd Nov 2018, 3:28 AM
George S Mulbah II
George S Mulbah II - avatar
Any one can help me? how to output multiple rows and colums in html using array in javascript? and how to put the user input to the table? 😕
2nd Nov 2018, 3:58 AM
Jamjam - avatar
<marquee><img src=“octocat.jpg” /></marquee> Or; <img src=“octocat.gif” />
8th Nov 2018, 8:05 PM
Potato Hacker
Potato Hacker - avatar
4th Jun 2020, 5:40 PM
Nishan Shah