Ticker Tape Animation With Images Using HTML And CSS

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Ticker Tape Animation With Images Using HTML and CSS. Before That, We Could See What This Project Is About.

This ticker tape is one of the animation methods used in CSS for displaying the images in a grid format (line by line) which is the same as a carousel. but here the images were moved one by one like the breaking news commands in news channels. Likewise, we are going to create this project with images.

Code by	Adam Fenton
Project Download	Link Available Below
Language used	HTML and CSS
External link / Dependencies	No
Responsive	Yes

So,  Let’s Begin Our Ticker Tape Journey By Adding The Source Codes. For That, First, We Are Using The Html Code.

HTML CODE For Ticker Tape Animation

<div class="overflow-hidden">

  <div class="flex -mx-4 img-ticker">

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

Here we first add the div class as a container for the whole content to make it hidden without collapsing with each other and that part is done with CSS.

Again we have added another div class for making the images animate in a ticker format.

So We have just done with HTML Code, Now Let’s Begin our Ticker Tape animation by adding the CSS code.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

CSS CODE For Ticker Tape Animation

@keyframes ticker-kf {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-108rem, 0, 0);
  }
}

.img-ticker {
  animation: ticker-kf 18s linear infinite;
}

Now we have done with adding the CSS Code. But Here we have used fewer lines of code only as it is enough to make the ticker tape animation. So let me explain this code in fewer steps down below.

STEP 1: First, With the keyframes property, we have given a name for the animation which is ticker-tf.

STEP 2: Second, We have fixed the start value of animation to 0%, Inside it We just adding the property transform: translate3d(0, 0, 0), so the images will be in the beginning position to start animating.

Create Congratulations Animation Using HTML, CSS And JAVASCRIPT Code

STEP 3: Third, We have fixed the end value of the animation to 100%, So from 0% to 100% the animation will perform until it reaches the end, and inside of end percentage value we just again add the line transform: translate3d(-108rem, 0, 0), now the images will start moving from start to end (all images) which is referred to as ticker tape animation.

STEP 4: The Last step is we just called out the animation name ticker-tf and fix the displaying of images property to 18s linear infinite, So the images will be displayed 18s of each and the animation of ticker tape will repeat again and again without stopping as we fixed the value to linear infinite.

So, Now we have successfully created our Ticker Tape Animation project, But here we have used the images with numbers So if you are going to create this project then make sure to add some Real-Time Images. Also, make a minute to see our project preview in the given Output Section.

FINAL-OUTPUT:

Now We have Successfully created our Ticker Tape Animation Using HTML and CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

50+ Html ,Css & Javascript Projects With Source Code

If you find out this Blog helpful? , Then make sure to search code with random on google for Front End Projects With Source codes and make sure to Follow the Code With Random Instagram page.

REFER CODE – Adam Fenton

WRITTEN BY – Ragunathan S