jquery typewritter

by Alexandru Gatea

HTML

<div class="type-container" >
  <p class="blinking-text" data-text="we offer |solutions |"></p>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Lato:400,700, 900');

* {
  margin:0;
  padding:0;
  font-family : "lato";
}

b {
  font-weight:900;
}

.type-container {
  position: relative;
  height: 100px;
  width:100%;
  text-align:center;
}

.blinking-text {
      font-size: 36px;
      color: #444;
      position:relative;
      line-height:100px;
      white-space: nowrap;
      display:inline-block;
      margin: 0 auto;
      padding: 0 10px;
}

.blinking-text:after {
  content: "";
  display:inline-block;
  width:4px; 
  height:30px;
  background:#444;
  position:absolute;
  top:50%;
  right:0;
  margin-top: 3px;
  transform: translateY(-50%);
  animation: blinking 0.8s linear infinite;
  
}

.blinking-text:empty:after {
  display:none;
}

@keyframes blinking {
  from,
  49.9% {
    opacity: 0;
  }
  50%,
  to {
    opacity: 1;
  }
}

JavaScript

jQuery(document).ready(function($) {
	var blinkers = $('.blinking-text');
	$.each( blinkers, function( key, blinker ) {
		var string = $(blinker).attr('data-text');
    showText(blinker, string, 0, 50);
	});
  
});
var showText = function (target, message, index, interval) {   
  	if (index < message.length) {
      if (message[index] == '|') {
      	index++;
        $(target).append("<b></b>");
        target = $(target).find('b');
        interval = 0;
      } else {
	    	$(target).append(message[index++]);
        interval = 50;
      }
  	  setTimeout(function () { showText(target, message, index, interval); }, interval);
  	}
	}