There are two easy ways to add a scrolling image to a web page (without using JavaScript). These are:
- HTML Scrolling Image — using the HTML
<marquee>tag - CSS Scrolling Image — using the CSS animations (recommended)
Adding Styles
You can add styles to your heart to make it stand out more. Styles can be added using Cascading Style Sheets (CSS).
In this example, we use the
<span> tag to apply styles to the heart within the sentence.| Source Code | Result |
|---|---|
I ♥ nature!
|
HTML Scrolling Image
The HTML method involves placing your
<img> element inside a <marquee> element.
See HTML Scrolling Image for more examples.
| Source Code | Result |
|---|---|
 |
CSS Scrolling Image
Below is the same effect, but this time it is done using CSS animations. This is the recommended method, as CSS animations are being added to the W3C CSS specifications.
In this case, we use the CSS
animation property in conjunction with the @keyframes rule to determine how the image should move. We use translateX() to specify the starting point and end point of the scrolling image.
See CSS Scrolling Image for more 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:
