Ticker tape is an important and a useful element on a webpage to display content with auto-scrolling provision. The content in the ticker may be images, links, texts or anything that moves from one side to the other. The moving direction of the ticker tape can be horizontal or vertical. You might have noticed ticker tapes in the news channel’s bottom part where news headlines are scrolled from one side to other continually.
In this tutorial, we will be making a ticker tape of images with some animations. Multiple images will be placed in a flexbox and we will set their direction as column.
We then will calculate the total width of the images and animate them from one side to its opposite side using keyframes. Let’s get started and write the code for this interesting mini project.
Table of Contents
Version 1: Code for HTML Image Ticker with CSS Only
Step 1: HTML structure
<br>
<h2> CSS animation ticker tape of images by CodingIsEasy.com </h2> <br>
<div class="overflow-hidden">
<!-- The slider itself is a flex grid -->
<div class="flex -mx-4 img-ticker">
<!-- Original set of images -->
<!-- Each image is a grid column with width 16rem (w-64) and horiztonal margin 1rem (mx-4) -->
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x341/f4ccccff/434343?text=1">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x192/f4ccccff/434343?text=2">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x341/f4ccccff/434343?text=3">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x192/f4ccccff/434343?text=4">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x341/f4ccccff/434343?text=5">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x192/f4ccccff/434343?text=6">
<!-- Copy set of images -->
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x341/f4ccccff/434343?text=1">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x192/f4ccccff/434343?text=2">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x341/f4ccccff/434343?text=3">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x192/f4ccccff/434343?text=4">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x341/f4ccccff/434343?text=5">
<img class="w-64 mx-4 self-start flex-none" src="https://via.placeholder.com/256x192/f4ccccff/434343?text=6">
</div>
</div>
Theory/Concept:
- There are 6 images in the ticker and each one of them is 16rem wide with a space of 2rem between them. Hence the ticker width is (16 + 2) * 6 = 108rem.
- We want 10 items to scroll by every 30 seconds, so each item should scroll through in 3s. In this example 1 cycle of the ticker animation lasts for 3 * 6 = 18s.
Step 2: CSS
<style>
@keyframes ticker-kf {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-108rem, 0, 0); }}
.img-ticker { animation: ticker-kf 18s linear infinite;}
h2{ text-align: center;}
</style>
Translate3d is an inbuilt function in CSS which is used to reposition an element in 3D space. Syntax = translate3d(tx,ty,tz).
The final output looks like this:
You will see that the images are scrolling from left to right automatically.
Version 2: CSS Images Carousel (AutoPlay)
See the Pen [CSS] Infinite autoplay carousel by Jack Oliver (@studiojvla) on CodePen.
That’s all! Hope you have successfully created a CSS animation ticker tape of images. If you have any questions or suggestions, let us know in the comment section below.