thinking..

index.html

<!-- 
hardships, breakups, whatever it may be, are all part of life. people come and go but those who stay are the ones worth saying 'i love you' to. dont take anyone for granted, live life to the fullest. 

to the one who broke my heart. i still love you.
-->

<h1>
  <a class="typewrite" 
     data-type='[ "i love you", 
                "i like you", 
                "i knew you", "hi" 
                ]'>
  </a>
</h1>

script.js

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);
    };

    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);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        document.body.appendChild(css);
    };

style.css

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color:#f6f6f6;
  color:#000;
}

.typewrite > .wrap { 
  color: #000;
  font-family: 'Swanky and Moo Moo', cursive;
}

* {
  color:#000; text-decoration: none; 
}

thinking.markdown

thinking..

A Pen by Conner on CodePen.

License.