Typing effect

<link href="https://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
<h1>
  <span
     class="txt-rotate"
     data-period="10"
     data-rotate='[ "Alpha Romero", "Aston Martin", "Toyota", "Honda", "Mazda" ]'></span>
</h1>
//Автор: Stephen Scaff. @StephenScaff

html,body {
  font-family: 'Raleway', sans-serif;
  padding: 3em 2em;
  font-size: 18px;
  background: #222;
  color: #aaa
}

h1,h2 {
  font-weight: 200;
  margin: 0.4em 0;
}
h1 { font-size: 3.5em; }
h2 {
  color: #888;
  font-size: 2em;
}

/* .txt-rotate > .wrap { border-right: 0.08em solid #666 } */
.cursor {
  display: inline-block;
  height: 1em;
  width: 2px;
  background: #fff;
  border-right: 1px solid #fff;
  animation: cursor 0.3s ease both;
}
@keyframes cursor {
  0% {
    opacity: 0;
  }
  
  50% {
    opacity:1;
  }
}

    var Typer = (function () {
    var period = parseInt(period, 10) || 2000;
    var txt = '';
    var elements = document.getElementsByClassName('txt-rotate');
    var delta = 300 - Math.random() * 100
    var isDeleting = false;
    var loopNum = 0;
    return {
    /**
     * Init
     */
    init: function() {
      console.log('hi')
      this.bindEvents();
    },
    
    bindEvents: function() {
     console.log('hi')
     for (var i=0; i<elements.length; i++) {
      var toRotate = elements[i].getAttribute('data-rotate');
      var period = elements[i].getAttribute('data-period');
        if (toRotate) {
          Typer.txtRotate(elements[i], JSON.parse(toRotate), period);
        }
      }
    },
      
      txtRotate: function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        Typer.tick();
        this.isDeleting = false;
      },
    
    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 class="cursor"></span></span>';
      var that = this;
      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);
      },
    };
  })();
  
  Typer.init();