TypeWriter Effect with Javascript | HTML, CSS & JS

#javascript #webdev #css #tutorial

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 :-

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>

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;
    }
}

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);
}