Telegram Group Join Now
ADVERTISEMENT
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.
ADVERTISEMENT
ADVERTISEMENT
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.
ADVERTISEMENT
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.
ADVERTISEMENT
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)
ADVERTISEMENT
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.
ADVERTISEMENT
Create Congratulations Animation Using HTML, CSS And JAVASCRIPT Code
ADVERTISEMENT
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
ADVERTISEMENT
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.
ADVERTISEMENT
REFER CODE – Adam Fenton
ADVERTISEMENT
WRITTEN BY – Ragunathan S
ADVERTISEMENT
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.
ADVERTISEMENT
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
No!
ADVERTISEMENT