Typing with Typo Correction and Pause Css | Text Typing Effect Html

Typing with Typo Correction and Pause Css  | Text Typing Effect Html 

Typing with Typo Correction and Pause Css | Text Typing Effect Html


Welcome🎉 to Code With Random blog. In this blog, we learn how we create a Typing with Typo Correction and Pause. We use HTML, Css, and javascript for this  Typing with Typo Correction and Pause I Hope you enjoy our blog so let’s start with a basic HTML structure for a Typing with Typo Correction and Pause.

HTML code

 <div class="typing animate"></div>  

There is all the HTML code for the Typing with Typo Correction and Pause. Now, you can see output without CSS, then we write css & javascript for the Typing with Typo Correction and Pause.

output

Typing with Typo Correction and Pause Css | Text Typing Effect Html
Simple Blank Output with Blank html tag

CSS Code

 * {  
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #eee;
}
.typing.animate {
width: 21ch;
border-right: 0.1em solid black;
font-family: monospace;
font-size: 2em;
animation: type 2.5s steps(20), writer 1s infinite alternate, delete 0.5s steps(5) 2.5s, type2 1s steps(4) 3s forwards, type3 3s steps(22, end) 6s forwards;
overflow: hidden;
white-space: nowrap;
cursor: pointer;
}
.typing.animate::before {
content: "Hello, I'm Codewithrandom";
animation: type2 1s steps(4) 3s forwards, type3 3s steps(22, end) 6s forwards;
}
@keyframes type {
from {
width: 0;
}
to {
width: 21ch;
}
}
@keyframes type2 {
from {
width: 16ch;
content: "Hello, I'm Codewithrandom. "
}
to {
width: 20ch;
content: "Hello, I'm Codewithrandom. "
}
}
@keyframes type3 {
from {
width: 20ch;
content: "Hello,I'm Codewithrandom. Welcome to my Website!
}
to {
width: 43ch;
content: "Hello,Codewithrandom. Welcome to my Website!"
}
}
@keyframes writer {
50% {
border-color: transparent;
}
}
@keyframes delete {
from {
width: 21ch;
}
to {
width: 16ch;
}
}

Here is our updated output CSS.

output

Typing with Typo Correction and Pause Css | Text Typing Effect Html

Typing with Typo Correction and Pause Css | Text Typing Effect Html

Javascript code 

 $(document).ready(() => {  
let typingElement = $('.typing');
typingElement.on('click', (e) => {
typingElement.removeClass('animate');
setTimeout(() => typingElement.addClass('animate'), 1);
})
});

Final output

Typing with Typo Correction and Pause Css | Text Typing Effect Html


Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Typing with Typo Correction and Pause you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a Typing with Typo Correction and Pause using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

Codepen by – Christine Mi

Check out more…..



Leave a Reply