CSS Scrolling Image

You can create scrolling images using CSS animations. CSS animations allow you to apply styles across a timeline. In other words, you can make things move around the page, as well as do things like change their appearance over a given time frame.

The CSS method of creating a scrolling image is recommended over the HTML method. This is because the HTML method uses the <marquee> element to achieve the scrolling image. The <marquee> element is not part of the official HTML specification, so if you need to create standards-compliant code, use CSS animations.

Note: Vendor prefixes have been added to make the code work across multiple browsers. To make the marquees fully W3C compliant, remove the vendor prefixes and their respective code (i.e. the bits that have -webkit- and -moz- in them).

Right to Left

To make a scrolling image we can use the CSS animation property (to apply an animation to the element) along with the @keyframes rule (to define the animation). Here, we're actually making the inner <div> element scroll. This element contains the image so the image scrolls too. To effect the actual scroll, we use translateX() and use different values for the start and end, which results in the image moving horizontally.

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="//www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish"> </div> </div>

Left to Right

To change direction, we simply change the values of translateX() so that 100% becomes -100% and -100% becomes 100%. In this case, I've also changed the image:

Source Code

Result

<style> .scroll-right { height: 100px; overflow: hidden; position: relative; } .scroll-right .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-right 15s linear infinite; -webkit-animation: scroll-right 15s linear infinite; animation: scroll-right 15s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes scroll-right { 0% { -moz-transform: translateX(-100%); } 100% { -moz-transform: translateX(100%); } } @-webkit-keyframes scroll-right { 0% { -webkit-transform: translateX(-100%); } 100% { -webkit-transform: translateX(100%); } } @keyframes scroll-right { 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-right"> <div class="inner"> <img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" alt="Spinning arrow"> </div> </div>

Scroll Up

To scroll up, we change the translateX() to translateY() and adjust the values accordingly. I've also set the height of the outer <div> to 300px in order to give enough space for the image to scroll.

Source Code

Result

<style> .scroll-up { height: 300px; overflow: hidden; position: relative; } .scroll-up .inner { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateY(100%); -webkit-transform:translateY(100%); transform:translateY(100%); /* Apply animation to this element */ -moz-animation: scroll-up 15s linear infinite; -webkit-animation: scroll-up 15s linear infinite; animation: scroll-up 15s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes scroll-up { 0% { -moz-transform: translateY(-100%); } 100% { -moz-transform: translateY(-100%); } } @-webkit-keyframes scroll-up { 0% { -webkit-transform: translateY(100%); } 100% { -webkit-transform: translateY(-100%); } } @keyframes scroll-up { 0% { -moz-transform: translateY(100%); /* Browser bug fix */ -webkit-transform: translateY(100%); /* Browser bug fix */ transform: translateY(100%); } 100% { -moz-transform: translateY(-100%); /* Browser bug fix */ -webkit-transform: translateY(-100%); /* Browser bug fix */ transform: translateY(-100%); } } </style> <div class="scroll-up"> <div class="inner"> <img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" alt="Arrow pointing up"> </div> </div>

Scroll Down

To scroll down, we simply switch the values of translateY() so that 100% becomes -100% and -100% becomes 100%:

Source Code

Result

<style> .scroll-down { height: 300px; overflow: hidden; position: relative; } .scroll-down .inner { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateY(-100%); -webkit-transform:translateY(-100%); transform:translateY(-100%); /* Apply animation to this element */ -moz-animation: scroll-down 15s linear infinite; -webkit-animation: scroll-down 15s linear infinite; animation: scroll-down 15s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes scroll-down { 0% { -moz-transform: translateY(-100%); } 100% { -moz-transform: translateY(100%); } } @-webkit-keyframes scroll-down { 0% { -webkit-transform: translateY(-100%); } 100% { -webkit-transform: translateY(100%); } } @keyframes scroll-down { 0% { -moz-transform: translateY(-100%); /* Browser bug fix */ -webkit-transform: translateY(-100%); /* Browser bug fix */ transform: translateY(-100%); } 100% { -moz-transform: translateY(100%); /* Browser bug fix */ -webkit-transform: translateY(100%); /* Browser bug fix */ transform: translateY(100%); } } </style> <div class="scroll-down"> <div class="inner"> <img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" alt="Arrow pointing down"> </div> </div>

Speed

To change the speed of the scrolling image, change the 15s to another value. Here we change it to 35s which means that it will take 35 seconds for the animation to complete each iteration.

Source Code

Result

<style> .scroll-slow { height: 100px; overflow: hidden; position: relative; } .scroll-slow .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-slow 35s linear infinite; -webkit-animation: scroll-slow 35s linear infinite; animation: scroll-slow 35s linear infinite; } /* Move it (define the animation) */ @-moz-keyframes scroll-slow { 0% { -moz-transform: translateX(100%); } 100% { -moz-transform: translateX(-100%); } } @-webkit-keyframes scroll-slow { 0% { -webkit-transform: translateX(100%); } 100% { -webkit-transform: translateX(-100%); } } @keyframes scroll-slow { 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-slow"> <div class="inner"> <img src="//www.html.am/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:

• HTML Marquee
• CSS Marquee
• Scrolling Text
• Slide-In Text
• Bouncing Text
• Scrolling Image
• Slide-In Image
• Bouncing Image

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