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);
}
Top comments (3)
😅
Someone just asked me to achive it only bases of js 😅 , I have also done with only css also 😎