Cara buat text mengetik sendiri dengan html dan javascript

Halo teman"..!!

 kembali lagi di blog saya, pada kesempatan kali ini saya akan memberikan tutorial cara membuat effect mengetik sendiri dengan javascript.

Caranya sebagai berikut :

Buat file dengan nama text-mengetik.html 

Dan isi dengan kode berikut :

<h3 align="center" class="typewrite text-white" data-period="2000" data-type='[ "Hello, World!.","Selamat Datang Di Blog Kami.","Kunjungi Blog Kami Terus.","Untuk Mendapatkan Update Artikel Terbaru." ]'h3/>

 Selanjutnya kita tambahkan javascript nya, sebagai berikut :

<script><br /><br /> var TxtType = function(el, toRotate, period) {<br /><br /> this.toRotate = toRotate;<br /><br /> this.el = el;<br /><br /> this.loopNum = 0;<br /><br /> this.period = parseInt(period, 10) || 2000;<br /><br /> this.txt = '';<br /><br /> this.tick();<br /><br /> this.isDeleting = false;<br /><br /> };<br /><br /> <br /><br /> TxtType.prototype.tick = function() {<br /><br /> var i = this.loopNum % this.toRotate.length;<br /><br /> var fullTxt = this.toRotate[i];<br /><br /> <br /><br /> if (this.isDeleting) {<br /><br /> this.txt = fullTxt.substring(0, this.txt.length - 1);<br /><br /> } else {<br /><br /> this.txt = fullTxt.substring(0, this.txt.length + 1);<br /><br /> }<br /><br /> <br /><br /> this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';<br /><br /> <br /><br /> var that = this;<br /><br /> var delta = 200 - Math.random() * 100;<br /><br /> <br /><br /> if (this.isDeleting) { delta /= 2; }<br /><br /> <br /><br /> if (!this.isDeleting && this.txt === fullTxt) {<br /><br /> delta = this.period;<br /><br /> this.isDeleting = true;<br /><br /> } else if (this.isDeleting && this.txt === '') {<br /><br /> this.isDeleting = false;<br /><br /> this.loopNum++;<br /><br /> delta = 500;<br /><br /> }<br /><br /> <br /><br /> setTimeout(function() {<br /><br /> that.tick();<br /><br /> }, delta);<br /><br /> };<br /><br /> <br /><br /> window.onload = function() {<br /><br /> var elements = document.getElementsByClassName('typewrite');<br /><br /> for (var i=0; i<elements.length; i++) {<br /><br /> var toRotate = elements[i].getAttribute('data-type');<br /><br /> var period = elements[i].getAttribute('data-period');<br /><br /> if (toRotate) {<br /><br /> new TxtType(elements[i], JSON.parse(toRotate), period);<br /><br /> }<br /><br /> }<br /><br /> // INJECT CSS<br /><br /> var css = document.createElement("style");<br /><br /> css.type = "text/css";<br /><br /> css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";<br /><br /> document.body.appendChild(css);<br /><br /> };<br /><br /> </script><p></p>

Jadi kurang lebih isi file seperti berikut :

<p></p><br /><br /><h3 align="center" class="typewrite text-white" data-period="2000" data-type='[ "Hello, World!.","Selamat Datang Di Blog Kami.","Kunjungi Blog Kami Terus.","Untuk Mendapatkan Update Artikel Terbaru." ]'></h3><br /><br /><script><br /><br /> var TxtType = function(el, toRotate, period) {<br /><br /> this.toRotate = toRotate;<br /><br /> this.el = el;<br /><br /> this.loopNum = 0;<br /><br /> this.period = parseInt(period, 10) || 2000;<br /><br /> this.txt = '';<br /><br /> this.tick();<br /><br /> this.isDeleting = false;<br /><br /> };<br /><br /> <br /><br /> TxtType.prototype.tick = function() {<br /><br /> var i = this.loopNum % this.toRotate.length;<br /><br /> var fullTxt = this.toRotate[i];<br /><br /> <br /><br /> if (this.isDeleting) {<br /><br /> this.txt = fullTxt.substring(0, this.txt.length - 1);<br /><br /> } else {<br /><br /> this.txt = fullTxt.substring(0, this.txt.length + 1);<br /><br /> }<br /><br /> <br /><br /> this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';<br /><br /> <br /><br /> var that = this;<br /><br /> var delta = 200 - Math.random() * 100;<br /><br /> <br /><br /> if (this.isDeleting) { delta /= 2; }<br /><br /> <br /><br /> if (!this.isDeleting && this.txt === fullTxt) {<br /><br /> delta = this.period;<br /><br /> this.isDeleting = true;<br /><br /> } else if (this.isDeleting && this.txt === '') {<br /><br /> this.isDeleting = false;<br /><br /> this.loopNum++;<br /><br /> delta = 500;<br /><br /> }<br /><br /> <br /><br /> setTimeout(function() {<br /><br /> that.tick();<br /><br /> }, delta);<br /><br /> };<br /><br /> <br /><br /> window.onload = function() {<br /><br /> var elements = document.getElementsByClassName('typewrite');<br /><br /> for (var i=0; i<elements.length; i++) {<br /><br /> var toRotate = elements[i].getAttribute('data-type');<br /><br /> var period = elements[i].getAttribute('data-period');<br /><br /> if (toRotate) {<br /><br /> new TxtType(elements[i], JSON.parse(toRotate), period);<br /><br /> }<br /><br /> }<br /><br /> // INJECT CSS<br /><br /> var css = document.createElement("style");<br /><br /> css.type = "text/css";<br /><br /> css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";<br /><br /> document.body.appendChild(css);<br /><br /> };<br /><br /> </script><p><br /></p>

Cukup sekian yg saya bisa sampaikan kali ini, tunggu update Terbaru nya terimakasih :)