Scrolling Image

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)

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
<marquee behavior="scroll" direction="left"> <img src="/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish"> </marquee>

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
<style> .scroll-left { height: 100px; overflow: hidden; position: relative; } .scroll-left .inner { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position / -moz-transform:translateX(100%); -webkit-transform:translateX(100%); transform:translateX(100%); / Apply animation to this element / -moz-animation: scroll-left 15s linear infinite; -webkit-animation: scroll-left 15s linear infinite; animation: scroll-left 15s linear infinite; } / Move it (define the animation) / @-moz-keyframes scroll-left { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes scroll-left { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes scroll-left { 0% { -moz-transform: translateX(100%); / Browser bug fix / -webkit-transform: translateX(100%); / Browser bug fix / transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); / Browser bug fix / -webkit-transform: translateX(-100%); / Browser bug fix */ transform: translateX(-100%); } } </style> <div class="scroll-left"> <div class="inner"> <img src="/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish"> </div> </div>

Source Code

Result

<style>
.scroll-left {
 height: 100px;	
 overflow: hidden;
 position: relative;
}
.scroll-left .inner {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%);	
 transform:translateX(100%);
 /* Apply animation to this element */	
 -moz-animation: scroll-left 15s linear infinite;
 -webkit-animation: scroll-left 15s linear infinite;
 animation: scroll-left 15s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0%   { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%); 		
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
</style>

<div class="scroll-left">
<div class="inner">
<img src="/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish">
</div>
</div>

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 :)