Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Text Typing Animation" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Text Typing Animation" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Text Typing Animation [Source Code]
To get the following HTML, CSS & JS code for the Text Typing Animation project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text Typing Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>I am a <span class="text-type"></span></h1> <!-- The below script tag is available in the below link --> <!-- https://github.com/mattboldt/typed.js/ --> <script src="https://unpkg.com/typed.js@2.0.15/dist/typed.umd.js"></script> <script src="index.js"></script> </body> </html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; background-color: yellow; } h1 { color: black; } span { color: blueviolet; }
// Check out below repository for more information about this Typed.js // (Github repo-->Readme.md-->Customization) // https://github.com/mattboldt/typed.js/ var typed = new Typed(".text-type",{ strings: ["Web Developer","Programmer","Open Source Contributor","Youtuber"], typeSpeed: 150, backSpeed: 150, loop : true })