DEV Community

Cover image for Make a Cool Typing Effect in just 5 Lines of JS code
šŸ”„[Video Tutorial]
Neat Coder
Neat Coder

Posted on

Make a Cool Typing Effect in just 5 Lines of JS code šŸ”„[Video Tutorial]




Hey Guys!!
This is a New Video from My YouTube Channel !
It's about designing a Cool Typing Effect !
I've made a Live Demo for you to try at https://cool-typing-effect-neatcoder.netlify.app

The Main objective of this tutorial is to implement something like this in less javascript code !

The Code is Pretty Simple! It uses the setInterval() function to loop through a string and append each Letter in the String To an Empty element..
Then, the cursor blinking effect is done with CSS. It sets the border-right property of the span element to white color and again sets it to transparent ...
So, I hope you got a Simple idea about this!

Get the Source files at https://github.com/Sakindu-d/Cool_Typing_Effect

Support My YT Channel at https://www.youtube.com/channel/UC_x91mqbyHX4-meYOpMxyUA

Thank you! šŸ˜„šŸ˜„šŸ˜„

Top comments (2)

Collapse
 
thomasbnt profile image
Thomas Bonnet •

Hello šŸ‘‹
Why did you not write here the tutorial and examples? Could be better for your post!

Collapse
 
neatcoder profile image
Neat Coder •

Hey,
I'll put! Thanks for the Suggestion šŸ˜„šŸ˜„šŸ˜„!