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
-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.
Left to Right
To change direction, we simply change the values of
translateX() so that
100%. In this case, I've also changed the image:
To scroll up, we change the
translateY() and adjust the values accordingly. I've also set the height of the outer
300px in order to give enough space for the image to scroll.
To scroll down, we simply switch the values of
translateY() so that
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.
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:
Also check out the Marquee Generator.
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 :)