HTML Bouncing Image
This page contains HTML code for creating bouncing images.
You can create a bouncing image in HTML using <marquee>
tags. You can make your image bounce sideways or up and down. You can use any image - photos, animated gifs, icons, etc.
Note: The <marquee>
tag is non-standard HTML (it's not part of the official HTML specifications). Therefore, it's recommended that you use a CSS Bouncing Image instead.
Side to Side
To make your image bounce back and forth, use behavior="alternate"
. Here's an example:
Source Code | Result |
---|---|
Note that browser support for bouncing marquees is quite limited.
Up & Down
You can make your image bounce up and down too. To do this, just add behavior="alternate" direction="up"
. Example:
Source Code | Result |
---|---|
Changing the Speed
You can speed up your bouncing image - or slow it down if you prefer. To do this, add the scrollamount
attribute. For example, scrollamount="1"
results in a very slow bounce, while scrollamount="50"
will be very fast.
Some examples:
Source Code | Result |
---|---|
More Marquee Codes
You can do much more with HTML marquees than is covered on this page. Here's the full list of marquee codes on this website:
Marquee Generator
Also check out the Marquee Generator.
Marquee Usability
Try to be careful when using HTML marquees. Many web users dislike websites that contain scrolling or bouncing images and other elements, so try to use them tastefully :)