Continuous movement of image in screen
After learning how to move an image in steps, the same position values can be updated continuously. The original tutorial moves the image downward first and then toward the right; that behavior is preserved.
Table of Contents
Continuous image movement video Top ↑
Use an animation loop Top ↑
The original lesson used setTimeout and clearTimeout. That historical approach is still worth recognizing, but the modern demo uses requestAnimationFrame(), which schedules visual updates with the browser's rendering cycle and can be stopped with cancelAnimationFrame().
let animationId = null;
function start() {
if (animationId === null) animationId = requestAnimationFrame(draw);
}
function reset() {
if (animationId !== null) cancelAnimationFrame(animationId);
animationId = null;
}
Demo of moving image across screen
Complete working source Top ↑
The original complete copyable page is preserved in modern form.
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo of Image moving across screen in JavaScript</title></head><body>
<div id="move-area" style="position:relative; min-height:420px; border:1px solid #ccc; overflow:hidden;"><img src="images/help.jpg" id="i1" alt="Help icon" style="position:absolute; left:40px; top:40px; max-width:80px;"></div>
<button type="button" id="start">Start</button><button type="button" id="reset">Reset</button><div id="msg"></div>
<script>const image = document.getElementById('i1');
const area = document.getElementById('move-area');
const output = document.getElementById('msg');
const startButton = document.getElementById('start');
const resetButton = document.getElementById('reset');
let animationId = null;
function draw() {
const maxTop = Math.max(0, area.clientHeight - image.offsetHeight);
const maxLeft = Math.max(0, area.clientWidth - image.offsetWidth);
let top = image.offsetTop;
let left = image.offsetLeft;
if (top < maxTop) top = Math.min(maxTop, top + 2);
else if (left < maxLeft) left = Math.min(maxLeft, left + 2);
else { animationId = null; return; }
image.style.top = `${top}px`;
image.style.left = `${left}px`;
output.textContent = `X: ${left} Y: ${top}`;
animationId = requestAnimationFrame(draw);
}
function start() { if (animationId === null) animationId = requestAnimationFrame(draw); }
function reset() {
if (animationId !== null) cancelAnimationFrame(animationId);
animationId = null; image.style.left='40px'; image.style.top='40px'; output.textContent='';
}
startButton.addEventListener('click', start);
resetButton.addEventListener('click', reset);</script></body></html>
More demo on moving image in screen Top ↑
Questions about moving images Top ↑
How can I move an image using JavaScript?
Change a positioned image's CSS left and top values.
What techniques can animate image movement?
For script-driven frame animation, requestAnimationFrame() is usually the best fit. CSS transitions or keyframes are often better when the movement is purely visual.
Can I control speed and direction?
Yes. Change the per-frame distance, duration, velocity, or direction values.
How can I make movement smooth?
Update movement in animation frames and base longer animations on elapsed time when consistent speed matters.
Are JavaScript libraries required?
No. Native DOM, CSS and animation APIs cover many cases; libraries are optional for complex timelines.
Can movement respond to user interaction?
Yes. Button clicks, keyboard input, pointer movement and drag gestures can all update the same position values.
What helps performance?
Avoid unnecessary layout reads/writes inside tight loops, animate only while needed, and prefer transforms for large production animations when appropriate.
Can multiple images move together?
Yes. Track each element's state separately or update a group within one animation loop.
How can I detect collisions?
Compare element positions or bounding rectangles and define what distance or overlap counts as a collision.
What device/browser considerations matter?
Use responsive boundaries, keyboard alternatives, touch/pointer support where relevant, and respect reduced-motion preferences for non-essential animation.
Image Object Movement of image by button click
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
| aza said | 16-01-2016 |
| pls help me to make an image to move from left to right using javascript | |
| Renee | 15-05-2016 |
| I pasted the above entire code and tried using it with teacher's car. Does the size of the object matter? What's the largest object size I can use? | |
| Saravanan | 28-07-2016 |
| Could you please add circle movement of image. For example shark is rotating the boat. | |
| Sakunne | 28-11-2016 |
| Is it possible to move an object according to certain rules, parallel to line or in given distance from circle or whatever custom line Thank you in advance | |
| smo1234 | 02-12-2016 |
| By adjusting X , Y values we can move the image in any direction. We can apply math formula to work out different X , Y values to move the image in an circle. | |