DEV Community

Cover image for Get a type-writer for your Portfolio site 😎
Abhishek Adhikari
Abhishek Adhikari

Posted on • Updated on

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. Today, I will exactly show how to get this working. Ok, so this is what we are trying to achieve today.

Alt Text
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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
        }
    }
};
Enter fullscreen mode Exit fullscreen mode

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);
};
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Hope, you enjoyed following this post and got your own type-writer effect working. Here's what we've created today
https://typewriter.lordvader.me/ .

Here's the repository to this tutorial.

typewriter-effect

Here's the repository. Just clone it to get started right away. 😎






Top comments (2)

Collapse
 
thisdotmedia_staff profile image
This Dot Media

Neat feature to have. Nice article Abhishek! 😁

Collapse
 
xpertr2 profile image
Abhishek Adhikari

Thanks !!! Will be putting more interesting posts. So stay tuned!!!