Image Ticker Built With Pure CSS

Ticker Tape Animation Using HTML And CSS Code

Ticker Tape Animation Using HTML And CSS Code

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.

Ticker Tape Animation Using HTML And CSS Code

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.

50+ HTML, CSS & JavaScript Projects With Source Code

Code byAdam Fenton
Project DownloadLink Available Below
Language usedHTML and CSS
External link / DependenciesNo
ResponsiveYes
Ticker Tape Animation Table

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.

Portfolio Website using HTML and CSS (Source Code)

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.

HTML Output:

Ticker Tape Animation Using HTML And CSS Code

 

Gym Website Using HTML and CSS With Source Code

CSS CODE For Ticker Tape Animation

ADVERTISEMENT

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

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

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

ADVERTISEMENT

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.

ADVERTISEMENT

10+ HTML CSS Projects For Beginners (Source Code)

ADVERTISEMENT

ADVERTISEMENT

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

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.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Video Output OfTicker Tape Animation Using CSS:

Live Preview Of Ticker Tape Animation Using CSS:-


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.

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

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

Which code editor do you use for Ticker Tape Animation coding?

I personally recommend using VS Code Studio, it’s straightforward and easy to use.

What is ticker tape Animation?

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.



Leave a Reply