DEV Community

Abhishek Adhikari

Posted on Jun 8, 2020 • Edited on May 17

Get a type-writer for your Portfolio site 😎

#javascript #html #css

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://typewriter.lordvader.me/ .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&#39m &#128526; Abhishek Adhikari.", "&#128514; 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&#39m &#128526; Abhishek Adhikari.", "&#128514; 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>