DEV Community

Cover image for TypeWriter Effect with Javascript | HTML, CSS & JS
adwait12345
adwait12345

Posted on • Updated on

TypeWriter Effect with Javascript | HTML, CSS & JS

Hello Everyone ,
Today we are going to learn how to do the type write effect in vanilla JavaScript. You would be surprised how simple it is and we can build it in only in few lines of JavaScript code.

Tools used in this video: VS Code, HTML , CSS , JavaScript

Follow my video tutorial :-


 
Enter fullscreen mode Exit fullscreen mode

Friends if you like it then also follow my youtube channel Bocadmium

How to Subscribe Bocadmium: https://www.youtube.com/channel/UC-AjAUV5Q42VV1Yv8oh6apg

Source Code :
1)index.html

<!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>Type writer</title>
    <script src="main.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box-main">
        <p class="text-big">
            <span class="text-change" data-wait="3000" data-words='["Premium Education for all!","Suscribe to Bocadmium"]'></span>
        </p>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

2)style.css

.box-main{
    display: flex;
    justify-content: center;
    align-items: center;
    color: grey;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    max-width: 100%;
    font-size: 30px;
}

/* cursor */
.text-change > .txt{
    border-right: 0.2rem solid #777;
    animation: blink 575ms infinite;
}
@keyframes blink {
    to{
        border-right: 0.2rem solid transparent;
    }
}

Enter fullscreen mode Exit fullscreen mode

3)main.js

const TypeWriter = function(txtElement, words, wait = 3000){
    this.txtElement = txtElement;
    this.words = words;
    this.txt = '';
    this.wordIndex=0;
    this.wait = parseInt(wait,10);
    this.type();
    this.isDeleting = false;
}
// Type Method
TypeWriter.prototype.type = function(){
   // current index of word
   const current = this.wordIndex % this.words.length;
// Get full text of curent word 
const fulltxt = this.words[current];
// check if deleting
if(this.isDeleting){
//Remove a character
this.txt = fulltxt.substring(0, this.txt.length - 1);
}else{
// Add a character
this.txt = fulltxt.substring(0, this.txt.length + 1);

}

// Insert txt into Element
this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

// type speed
let typespeed = 50;

if(this.isDeleting){
    typespeed = typespeed / 2;
}

//if word is complete
if(!this.isDeleting && this.txt === fulltxt)
{
    //Make a pause at end
   typespeed = this.wait;
    // set delete is true
    this.isDeleting = true;

}else if(this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    //move to next word
this.wordIndex++;
//Pause before start typing
typespeed = 500;

}
setTimeout(() =>this.type(), typespeed)

}
// init on dom load
document.addEventListener('DOMContentLoaded', init);

//init app
function init(){
  const txtElement = document.querySelector('.text-change');
  const words = JSON.parse(txtElement.getAttribute('data-words'));
  const wait = txtElement.getAttribute('data-wait');
  //init type writer
new TypeWriter(txtElement, words, wait);
}
Enter fullscreen mode Exit fullscreen mode

Discussion (5)

Collapse
lukeshiru profile image
LUKESHIRU

You might want to use CSS only for this kind of effects so they are more accessible (changing the actual text with JS is bad for screen readers). There are some great articles about how you can achieve this here in DEV:

Cheers!

Collapse
Sloan, the sloth mascot
Comment deleted
Collapse
adwait12345 profile image
adwait12345 Author

πŸ˜…

Collapse
adwait12345 profile image
adwait12345 Author

Someone just asked me to achive it only bases of js πŸ˜… , I have also done with only css also 😎