Get a type-writer for your Portfolio site š
Wanna get a type-writer effect working on your portfolio to get an awesome impression on new visitors. Then youāre at the right postā¦
Wanna get a type-writer effect working on your portfolio to get an awesome impression on new visitors. Then youāre at the right post. Today, I will exactly show how to get this working. Ok, so this is what we are trying to achieve today.
To get a live view of this thing working you can visit my portfolio site at https://abhishek.sairyonodevs.in .The link to whole source code will be available at the end of this post.
So, letās get started.
First, we need to set-up our html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>. . .</title>
</head>
<body>
.
.
</body>
</html>Now, lets a type-writer effect style heading inside the body of html. Weāll have our sentences as parameters of div tag and the actual text content of the div empty. Weāll then fetch these sentences by javascript and inject it into the empty tag that weāll put there.
<h1>
<div class="typewrite" data-period="1000" data-type='[ "Hi, I'm 😎 Abhishek Adhikari.", "😂 You just copied this code, right?", "No worries.", "šØāš» Just go through the code you will get it.", "Jai Hind !!! " ]'>
<span class="wrap"></span>
</div>
</h1>Now, weāll get our javascript code to fetch the sentences from the html and pass it into empty tag.
window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type');
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
};Now, weāll create the TxtType function for typing effect.
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) { delta /= 2; }
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};And to get a cursor we will add a border-right to the tag while injecting the css when the javascript loads.
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.10em solid #fff}";
document.body.appendChild(css);By this time the type-writer is already working. But weāll add little css to get it look better. Putting all this together the code becomes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typewriter-effect</title>
<style>
body {
width: 100%;
height: 100%;
background-color: rgb(255, 94, 0);
overflow: hidden; /* to hide scroll bars nothing to do with type-writer */
text-align: center;
}
h1 {
padding: 20% 0;
color: white;
}
</style>
</head>
<body>
<h1>
<div class="typewrite" data-period="1000" data-type='[ "Hi, I'm 😎 Abhishek Adhikari.", "😂 You just copied this code, right?", "No worries.", "šØāš» Just go through the code you will get it.", "Jai Hind !!! " ]'>
<span class="wrap"></span>
</div>
</h1>
<script>
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>'; //the text for each step is inserted inside the <span>
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) { delta /= 2; }
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('typewrite'); //the typewrite tag from html is linked to elements
for (var i=0; i<elements.length; i++) {
var toRotate = elements[i].getAttribute('data-type'); //all the sentences are stored here
var period = elements[i].getAttribute('data-period');
if (toRotate) {
new TxtType(elements[i], JSON.parse(toRotate), period);
}
}
//once this function starts working
//the css for .wrap <span> is injected to the DOM
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = ".typewrite > .wrap { border-right: 0.10em solid #fff}";
document.body.appendChild(css);
};
</script>
</body>
</html>Hope, you enjoyed following this post and got your own type-writer effect working. Hereās what weāve created today
https://abhishekadhikari23.github.io/typewriter-effect/ .
Hereās the repository to this tutorial.
