Want to be a web developer and Technical geek? Welcome, to ThapaTechnical. Home of web developer and creativity. We make articles on Technology, Social cause, University Important topics and also u will get all videos source code and Notes for Free of ThapaTechnical YouTube channel.
Have you ever wanted to add some vintage charm to your website? Or perhaps you're looking for a way to make your text more engaging for your visitors? If so, then a typewriter effect may be just what you need. In this tutorial, we will show you how to create a typewriter effect using JavaScript.
Before we begin, the full source code of this project is available for free at the bottom section.
Writing the HTML Code
The first step in creating a typewriter effect is to set up the HTML structure for the text we want to animate. In our example, we will use a paragraph element, but you can use any other element you prefer. Here is the basic HTML code we will be working with:
Styling with CSS
Now that we have set up our HTML structure, we can move on to styling the text with CSS. Here is the CSS code we will be using:
The CSS code will be provided below in the complete source code section.
Adding the JavaScript Code
Now that we have set up the HTML and CSS for our typewriter effect, we can add the JavaScript code to animate the text. Here is the JavaScript code we will be using:
1: The first line of the code assigns the DOM element with the class "main_heading" to the variable title using the document.querySelector() method.
2: The second line of the code initializes a string variable named name with the value "i am thapa technical".
3: The third line of the code initializes a numeric variable named index with the value 1.
4: The fourth line of the code defines a function named typeWriter using the arrow function syntax.
5: Inside the typeWriter function, a new string is created by using the slice() method on the name string variable. The slice() method extracts a portion of the name string from the beginning up to the index value, and assigns the resulting string to a new variable named new_title.
6: The innerText property of the title element is set to the value of the new_title variable. This will update the text displayed on the page with the current value of new_title.
7: The index variable is incremented by 1 using the post-increment operator (++). If index is greater than the length of the name string, the index variable is reset to 1. This allows the typing animation to loop back to the beginning of the name string.
8: The setTimeout() function is called with a callback function that is a reference to typeWriter, and a delay of 100 milliseconds. This sets up a recursive loop that calls the typeWriter function every 100 milliseconds.
9: Finally, the typeWriter function is called once at the end of the code to start the typing animation.
