Web Typing Animation

web_typing_animation.html

<style>
html,
body {
    font-family: 'Poppins', sans-serif;
    padding: 0em 0em;
    font-size: 16px;
    background: #222;
    color: #000;
    background-color: transparent;
}

h1,
h2 {
    font-weight: 200;
    margin: 0.4em 0;
}

h1 {
    font-size: 3.5em;
}

h2 {
    color: #888;
    font-size: 2em;
}
</style>
<script type="text/javascript">
// HTML CSS JSResult Skip Results Iframe
// EDIT ON
var TxtRotate = function (el, toRotate, period) {
    this.toRotate = toRotate;
    this.el = el;
    this.loopNum = 0;
    this.period = parseInt(period, 2) || 100;
    this.txt = '';
    this.tick();
    this.isDeleting = false;
};

TxtRotate.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 = 300 - 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('txt-rotate');
    for (var i = 0; i < elements.length; i++) {
        var toRotate = elements[i].getAttribute('data-rotate');
        var period = elements[i].getAttribute('data-period');
        if (toRotate) {
            new TxtRotate(elements[i], JSON.parse(toRotate), period);
        }
    }
    // INJECT CSS
    var css = document.createElement("style");
    css.type = "text/css";
    css.innerHTML = ".txt-rotate > .wrap { border-right: 0.08em solid #666 }";
    document.body.appendChild(css);
};
</script>

<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<h1>I'm a<span class="txt-rotate" data-period="500"
    data-rotate='[ " student.", " roboticist.", " photographer.", " nerd.", " singer.", "n aerospace engineer.", " music producer.", " Youtuber.","n app developer.", " filmmaker." ]'></span>
</h1>

This produces the result seen in the home page of dalonso.me (my personal website)