How we can create a typing effect using HTML CSS and JavaScript? Solution: See this JavaScript Typing Effect With CSS Styling, Auto Type Characters Loop.
Earlier I have shared auto type effect, this program is also like that but it has more perfection and good design. Basically, auto type effects used by many websites on the banner or their landing page. Like you have show 5-6 similar sentences to your users then you can use this program for good visual.
Today you will learn to create Auto Type Characters Loop Effect. Basically there is an incomplete sentence which is “Coding is __”, and 4 items for fill the blanks. When you will start this typing animation program then the four items will be typed automatically one after one on loop. And an animated text or typing cursor makes the fully typing effect.
So, Today I am sharing JavaScript Typing Effect With CSS Styling. There I have used pure JavaScript for creating the program, there are no library or framework has been used. You can use this program on your website after making some changes according to you, like the sentence, animation-delay, color, etc.
If you are thinking now how this typing effect actually is, then see the preview given below.
Preview Of Auto Type Characters Loop
See this video preview to getting an idea of how this auto type effect looks like.
Now you can see this visually, also you can see it live by pressing the button given above. If you like this then get the source code of its.
You May Also Like:
- JavaScript Portfolio Navigation
- Circular Sharing Widget
- Responsive Timeline Slider
- Water Filling Text Animation
JavaScript Typing Effect With CSS Styling Source Code
Before sharing source code, let’s talk a little bit about it. First, I have created a div and placed a paragraph tag inside it, but the sentence is incomplete now inside the same div I have placed two spans with class names. These two spans are for text and typing cursor, also in the HTML file I have linked other files like CSS, JS.
Now using CSS I have placed the text in the center as you can see in the preview. With CSS I gave the height of whole element 100vh, it means it will cover the full screen of the device. There I have used a google font for the text, and linked font’s CDN file in the CSS file using @import command (info). Also using CSS I have created the typing cursor blink effect using CSS @keyframe .
Now in the JavaScript file, I have fetched two elements text span and cursor span. For getting the HTML element‘s data I have used JavaSript document.querySelector command. Now I have stores the words for fill in the blanks in an array, also I have declared animation delay for typing and next word. Now all functions have done using JS if {} else {} statement.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this program without error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <!-- Code By Webdevtrick ( https://webdevtrick.com ) --> <html lang="en" > <head> <meta charset="UTF-8"> <title>JavaScript Typing Effect | Webdevtrick</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <p>Coding is <span class="typed-text"></span><span class="TypeCursor"> </span></p> </div> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url('https://fonts.googleapis.com/css?family=Alata&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Alata', sans-serif; background-color: #212121; color: #eee; } .container { height: 100vh; display: flex; justify-content: center; align-items: center; } .container p { font-size: 3rem; padding: 0.5rem; font-weight: bold; letter-spacing: 0.1rem; text-align: center; overflow: hidden; } .container p span.typed-text { font-weight: normal; color: #dd7732; } .container p span.TypeCursor { display: inline-block; background-color: #ccc; margin-left: 0.1rem; width: 3px; animation: blink 1s infinite; } .container p span.TypeCursor.typing { animation: none; } @keyframes blink { 0% { background-color: #ccc; } 49% { background-color: #ccc; } 50% { background-color: transparent; } 99% { background-color: transparent; } 100% { background-color: #ccc; } } @media (max-width:750px) { .container p { font-size: 2rem; } } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
// Code By Webdevtrick ( https://webdevtrick.com ) const TypingText = document.querySelector(".typed-text"); const AutoTyping = document.querySelector(".TypeCursor"); const textArray = ["hard.", "Life.", "Emotion.", "Passion."]; const typingDelay = 200; const erasingDelay = 100; const newTextDelay = 2000; let textArrayIndex = 0; let charIndex = 0; function type() { if (charIndex < textArray[textArrayIndex].length) { if(!AutoTyping.classList.contains("typing")) AutoTyping.classList.add("typing"); TypingText.textContent += textArray[textArrayIndex].charAt(charIndex); charIndex++; setTimeout(type, typingDelay); } else { AutoTyping.classList.remove("typing"); setTimeout(erase, newTextDelay); } } function erase() { if (charIndex > 0) { if(!AutoTyping.classList.contains("typing")) AutoTyping.classList.add("typing"); TypingText.textContent = textArray[textArrayIndex].substring(0, charIndex-1); charIndex--; setTimeout(erase, erasingDelay); } else { AutoTyping.classList.remove("typing"); textArrayIndex++; if(textArrayIndex>=textArray.length) textArrayIndex=0; setTimeout(type, typingDelay + 1100); } } document.addEventListener("DOMContentLoaded", function() { if(textArray.length) setTimeout(type, newTextDelay + 250); }); |
That’s It. Now you have successfully created JavaScript Typing Effect With CSS Styling, Auto Type Characters Loop. If you have any doubt or question then comment down below.
Thanks For Visiting, Keep Visiting.
