<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<head> <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"></head>
<h1>
<a href="" class="typewrite" data-period="2000" data-type='[ "Welcome to xLabs.", "What if Smart homes made dumb choices?", "What if Blockchain becomes a ball and chain?", "What if open APIs spell the end of traditional banking?", "What if gamification drives the wrong behaviours?", "What if Artificial Intelligence makes fraud impossible?", "What if someone steals your e-wallet?", "What if Natural Language Understanding makes devices better listeners than humans?", "What if your virtual assistant is more Hal than Her?", "What if Virtual Reality becomes better than actual reality?" ]'>
<span class="wrap"></span>
</a>
</h1>
body {
background-color:#000;
font-family: 'Nunito', sans-serif;
text-align: center;
color:#fff;
padding-top:10em;
}
* { color:#fff; text-decoration: none;}
//made by vipul mirajkar thevipulm.appspot.com
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";
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
document.body.appendChild(css);
};
