Bouncing Image
There are two easy ways to add a bouncing image to a web page (without using JavaScript). These are:
- HTML Bouncing Image — using the HTML
<marquee>
tag - CSS Bouncing Image — using the CSS animations (recommended)
HTML Bouncing Image
The HTML method of creating a bouncing image is by using the (non-standard) <marquee>
tags.
See HTML Bouncing Image for more examples.
Source Code | Result |
---|---|
CSS Bouncing Image
You can also use CSS animations to create a bouncing image. In fact, this is the recommended method.
See CSS Bouncing Image for more examples.
Source Code | Result |
---|---|
|
HTML vs CSS
At first glance, the HTML <marquee>
method might seem to be the better method to use when creating bouncing text and other marquee effects. It's easier to code, more intuitive, and seems to have pretty good browser support. It does however, have one major downfall — it is non standard HTML.
The <marquee>
element is not actually included in the official HTML specifications. CSS animations on the other hand, are being written into the official CSS specifications. This means that, if being standards-compliant is important for you, CSS animations are the way to go. In this case, use the CSS Bouncing Image.
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 :)