CSS Animation Ticker Tape of Images

The ticker tape is a useful element on a webpage to display content with auto-scrolling. The ticker content may be text, links, or images with auto-moving from one side to another. Similarly, the moving direction for the ticker’s content may be horizontal or vertical. This tutorial explains the technique to create a horizontal ticker tape of image animation using pure CSS.

Mostly, ticker tape is used for the latest news in magazine, news, and educational website templates. Anyhow, it’s also a useful component to display on a personal portfolio or blog website.  You can also check Horizontal News Ticker to implement in your project.

The idea to achieve the desired result is really simple. We’ll place multiple images in a flexbox and set their direction as a column. Then we’ll calculate the total width of images and animate them from one side to another using CSS keyframes. You can see the final output of the ticker tape images on the demo page in action. The image size, moving speed, and direction can be customized according to your needs. So, let’s get started with HTML to create a ticker tape of images.

The HTML Structure

In HTML, create a div element with the class name "ticker-tape" and create another div element inside it with a class name "slide-track". Place your images wrapped into a div element with the class name "slide" inside the slide track div. Wrap all these elements into a container and define its class name "ticker-container". So, the complete HTML structure for the ticker tape of images is as follows:

<div class="ticker-container">
   <div class="ticker-tape">
      <div class="slide-track">
         <div class="slide"><img class="alignnone size-full wp-image-13024" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-wipro_logo.jpg" alt="" width="60" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13023" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-w.l.-gore-logo.jpg" alt="" width="110" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13022" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-visa.jpg" alt="" width="188" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13021" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-vf_circle_logo-290.jpg" alt="" width="60" height="60" /></div>
         <div class="slide"><img class="alignnone size-full wp-image-13020" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-unitedhealthcareprocycling_logo2017-trans.jpg" alt="" width="285" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13019" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-tyco-electronics-logo.jpg" alt="" width="184" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13018" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-toyota-logo.jpg" alt="" width="73" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13017" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-thyssenkrupp.jpg" alt="" width="79" height="60" /></div>
         <div class="slide"><img class="alignnone size-full wp-image-13016" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-tech_mahindra_new_logo.jpg" alt="" width="212" height="60" /></div>
         <div class="slide"><img class="alignnone size-full wp-image-13015" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-standard-chartered-bank-777x437.jpg" alt="" width="155" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13014" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-solix-logo.jpg" alt="" width="237" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13013" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-smuckers_logo.jpg" alt="" width="194" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13012" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-siemens-logo-300x49.jpg" alt="" width="300" height="49" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13011" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-sap-logo.jpg" alt="" width="118" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13010" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-paypal.jpg" alt="" width="230" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13009" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-otterbox.jpg" alt="" width="92" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13008" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-ntt_communications_.jpg" alt="" width="243" height="60" /></div>
         <div class="slide"><img class="alignnone size-full wp-image-13007" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-nike-logo-free-png-image.jpg" alt="" width="115" height="60" /></div>
         <div class="slide"><img class="alignnone size-full wp-image-13006" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-nestle.jpg" alt="" width="202" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13005" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-mtuity-logo.jpg" alt="" width="173" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13004" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-lancaster.jpg" alt="" width="187" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13003" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-kaneka.jpg" alt="" width="233" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13002" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-intel-logo.jpg" alt="" width="90" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13001" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-ibm_logo.jpg" alt="" width="150" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-12999" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-hitachi_logo-300x52.jpg" alt="" width="300" height="52" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-13000" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-huawei-logo-web.jpg" alt="" width="241" height="60" /></div>
         <div class="slide"><img class="alignnone size-full wp-image-12998" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-hero-cycles-logo.jpg" alt="" width="242" height="60" /></div>
         <div class="slide"><img class="alignnone size-full wp-image-12997" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-heatcraft.jpg" alt="" width="195" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-12995" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-fujitsu.jpg" alt="" width="119" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-12996" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-goodyear-tires-in-ohio-300x60.jpg" alt="" width="300" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-12994" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-fedexlogo.jpg" alt="" width="204" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-12993" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-ezdi-logo.jpg" alt="" width="279" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-12992" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-ericsson.jpg" alt="" width="295" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-12991" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-dpt_dupont_logo_thumbnail_690x345.jpg" alt="" width="150" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-12990" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-collabera-logo.jpg" alt="" width="217" height="60" /></div>
         <div class="slide"><img class="alignnone size-medium wp-image-12989" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-coca-cola.jpg" alt="" width="175" height="60" /></div>
         <div class="slide"><img class="alignnone size-full wp-image-12988" src="https://garwoodcenter.wpengine.com/wp-content/uploads/2018/02/mini-logo-applied_materials_logo.jpg" alt="" width="237" height="60" /></div>
      </div>
   </div>
</div>

In the above HTML code, you just need to update the links of images. Moreover, you can also wrap this ticker tape code into other elements for further customization.

The CSS Styles for Ticker Tape of Images

In CSS, select the "ticker-tape" class that is the container element of the ticker tape. Set the "auto" value for the height and width in order to make it responsive. Here, the important thing to consider is the overflow property that should be hidden to avoid overlapping of images. Define the relative position along with 100% of the width.

.ticker-container .ticker-tape {
  height: auto;
  margin: auto;
  overflow: hidden;
  position: relative;
  width: 100%;
}

We want to have white transparency from both the left and right sides of the ticker tape. To do so, target the before and after pseudo-selectors and define a linear-gradient background. Set the absolute position with 100px of height and 200px width. Define the z-index property with 2 value to keep this transparency layer over the images.

.ticker-container .ticker-tape:before, .ticker-container .ticker-tape:after {
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
  content: "";
  height: 100px;
  position: absolute;
  width: 200px;
  z-index: 2;
}

Now, select "before" and "after" pseudo-selectors for ticker-tape individually and set their left and right positions as follows:

.ticker-container .ticker-tape:after {
  right: 0;
  top: 0;
  transform: rotateZ(180deg);
}

.ticker-container .ticker-tape:before {
  left: 0;
  top: 0;
}

The "slide-track" is the wrapper element of the images slide. Display it flex and specify the animation-name "scroll" with 40s linear time duration. We’ll define the animation keyframes in the last step. We need a fixed width for the slide track according to the total width of all images. So, use the CSS calc function to to count the width of all images. I have 14 images and each image has 250px width. You can set these values according to your image’s width and the number of images.

.ticker-container .slide-track {
  -webkit-animation: scroll 40s linear infinite;
          animation: scroll 40s linear infinite;
  display: flex;
  width: calc(250px * 14);
}

The "slide" class is the wrapper of each image inside the ticker tape. Select this class and display it as flex. Set the flex-direction to column and justify-content to the center. Similarly, define the padding property to leave some space around each image.

.ticker-container div.slide {
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Finally, define the animation keyframes for the "scroll" animation name. Inside the key values, just use the CSS transform property with translateX value. Again, calculate transformation values by multiplying the width of each image by half number of images.

/* Animation */
@-webkit-keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-250px * 7));
  }
}

That’s all! I hope you have successfully created a CSS animation ticker tape of images. If you have any questions or suggestions, let me know by comment below.