"JS Typewriter (Text Animation)"
Bootstrap 3.3.0 Snippet by vipulmirajkar

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--made by vipul mirajkar thevipulm.appspot.com--> <h1> <a href="" class="typewrite" data-period="2000" data-type='[ "Hi, Im VipulM.", "I am Creative.", "I Love Design.", "I Love to Develop." ]'> <span class="wrap"></span> </a> </h1>
body { background-color:#ce3635; 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); };

Related: See More


Questions / Comments:

Good one

anuradhan () - 4 years ago - Reply 0


I don't want in loop. Just once. How to stop that.

mgsurti () - 4 years ago - Reply 0


how do i make the letters to go faster?

Revolver8875 () - 5 years ago - Reply 0


hai, nice code.
but how i can implement this code with php and mysql database ?

Guntoro, Ade () - 7 years ago - Reply 0


this code is basic ui, add the html code where you want it to display on your page then create and external js file for the js code, same goes for the css

Chambah russell () - 7 years ago - Reply 0