TypeWriter Effect with Javascript | HTML, CSS & JS

This content originally appeared on DEV Community and was authored by adwait12345

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 please subscribe my youtube channel Bocadmium

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

This content originally appeared on DEV Community and was authored by adwait12345

Print Share Comment Cite Upload Translate Updates

APA

adwait12345 | Sciencx (2021-11-06T18:05:13+00:00) TypeWriter Effect with Javascript | HTML, CSS & JS. Retrieved from https://www.scien.cx/2021/11/06/typewriter-effect-with-javascript-html-css-js/

MLA

" » TypeWriter Effect with Javascript | HTML, CSS & JS." adwait12345 | Sciencx - Saturday November 6, 2021, https://www.scien.cx/2021/11/06/typewriter-effect-with-javascript-html-css-js/

HARVARD

adwait12345 | Sciencx Saturday November 6, 2021 » TypeWriter Effect with Javascript | HTML, CSS & JS., viewed ,<https://www.scien.cx/2021/11/06/typewriter-effect-with-javascript-html-css-js/>

VANCOUVER

adwait12345 | Sciencx - » TypeWriter Effect with Javascript | HTML, CSS & JS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/06/typewriter-effect-with-javascript-html-css-js/

CHICAGO

" » TypeWriter Effect with Javascript | HTML, CSS & JS." adwait12345 | Sciencx - Accessed . https://www.scien.cx/2021/11/06/typewriter-effect-with-javascript-html-css-js/

IEEE

" » TypeWriter Effect with Javascript | HTML, CSS & JS." adwait12345 | Sciencx [Online]. Available: https://www.scien.cx/2021/11/06/typewriter-effect-with-javascript-html-css-js/. [Accessed: ]

rf:citation

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts