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 CodeResult
Swimming fish

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 CodeResult
Spinning arrow

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 CodeResult

Scroll Down

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

Source CodeResult

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 CodeResult
Swimming fish

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

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

Need Hosting?

Our partner site ZappyHost provides website hosting, domain names and related products at some of the best prices on the web. If you need web hosting, check them out!