Typing Effect Using JavaScript

Hello Readers,

Today in this blog you’ll learn how to create typing effect using JavaScript. Previously I have shared a How to create calculator using JavaScript? now it’s time to create a typing effect using JavaScript, HTML, CSS.

In that tutorial you have seen typing effect. I used the CSS for styling, JavaScript for typing effect.

If you’re a beginner, you can also create this types of Typing effect and good them according to your choice because there are no vast codes of JavaScript.

See also  Custom Accessible Tooltip with Html5 and CSS

If you like this program (Custom Design) and want to get source code. You can easily get the source codes of this program. To get the source codes you just need to scroll down.

You might like this:


If you need the same background images and icons on your website you can Download Image.

<!DOCTYPE html>
<!-- code by CodeitHub ( https://CodeitHub.com ) -->
<html>
    <head>
        <title>Typing Effect</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, inital-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="intro">
            <h1>Hello, Everyone I am </h1>
            <h1 class="typing"></h1>
        </div>
        <script src="script.js"></script>

    </body>
</html>
/** code by CodeitHub ( https://CodeitHub.com ) **/
body{
    font-family: sans-serif;
    margin:0;
    padding:0;
    box-sizing: border-box;
    background-color: black;
}
.intro{
    display:flex;
    color:white;
    height:100vh;
}
.typing{
    margin-left: 10px;
    position: relative;
}
.typing::after{
    content: "";
    position: absolute;
    right:-5px;
    width:1px;
    height:5%;
    border-right: 2px solid white;
    animation:0.5s blink infinite ease;
}
@keyframes blink{
    0%{
    opacity: 0;
    }

100%{
    opacity: 1;
}
}
const texts =["Software Developer", "front-end Developer", "Quick Learner","......."];
let count=0;
let index=0;
let currentText="";
let letter="";

(function type(){
    if (count === texts.length){
        count=0;
    }
    currentText = texts[count];
    letter = currentText.slice(0, ++index);
    
    document.querySelector(".typing").textContent = letter;
    if(letter.length === currentText.length){
        count++;
        index=0;
    }
    setTimeout(type,250);
})();

Output

Leave a Reply

Your email address will not be published. Required fields are marked *