Barisan teks ini adalah contoh Typing Text atau Teks Mengalir.
Typing Text merupakan salah satu variasi teks yang banyak disukai oleh blogger selain Marquee (). Dengan menggunakan typing text ini tulisan akan nampak seperti aliran air yang mengalir terus menerus sampai tulisan tersebut habis. Anda dapat mengatur kecepatan aliran teks dengan sedikit mengutak atik kode JavaScript-nya sehingga dapat disesuaikan dengan kebutuhan situs anda, semakin besar angka yang anda masukkan maka aliran teks akan semakin lambat. Sedangkan untuk penggunaanya, anda dapat menggunakan typing text ini sebagai pesan peringatan konten, ucapan selamat datang atau salam pembuka dan lain sebagainya. Seperti yang anda lihat pada kalimat yang saya beri warna kuning, anda juga dapat menyisipkan kode JavaScript yang lain untuk mempercantik tampilan teks anda.
Kode JavaScript:
<script type="text/javascript"> TypingText = function(element, interval, cursor, finishedCallback) { if((typeof document.getElementById == "undefined") || (typeof element.innerHTML == "undefined")) { this.running = true; // Never run. return; } this.element = element; this.finishedCallback = (finishedCallback ? finishedCallback : function() { return; }); this.interval = (typeof interval == "undefined" ? 100 : interval); this.origText = this.element.innerHTML; this.unparsedOrigText = this.origText; this.cursor = (cursor ? cursor : ""); this.currentText = ""; this.currentChar = 0; this.element.typingText = this; if(this.element.id == "") this.element.id = "typingtext" + TypingText.currentIndex++; TypingText.all.push(this); this.running = false; this.inTag = false; this.tagBuffer = ""; this.inHTMLEntity = false; this.HTMLEntityBuffer = ""; } TypingText.all = new Array(); TypingText.currentIndex = 0; TypingText.runAll = function() { for(var i = 0; i < TypingText.all.length; i++) TypingText.all[i].run(); } TypingText.prototype.run = function() { if(this.running) return; if(typeof this.origText == "undefined") { setTimeout("document.getElementById('" + this.element.id + "').typingText.run()", this.interval); // We haven't finished loading yet. Have patience. return; } if(this.currentText == "") this.element.innerHTML = ""; // this.origText = this.origText.replace(/<([^<])*>/, ""); // Strip HTML from text. if(this.currentChar < this.origText.length) { if(this.origText.charAt(this.currentChar) == "<" && !this.inTag) { this.tagBuffer = "<"; this.inTag = true; this.currentChar++; this.run(); return; } else if(this.origText.charAt(this.currentChar) == ">" && this.inTag) { this.tagBuffer += ">"; this.inTag = false; this.currentText += this.tagBuffer; this.currentChar++; this.run(); return; } else if(this.inTag) { this.tagBuffer += this.origText.charAt(this.currentChar); this.currentChar++; this.run(); return; } else if(this.origText.charAt(this.currentChar) == "&" && !this.inHTMLEntity) { this.HTMLEntityBuffer = "&"; this.inHTMLEntity = true; this.currentChar++; this.run(); return; } else if(this.origText.charAt(this.currentChar) == ";" && this.inHTMLEntity) { this.HTMLEntityBuffer += ";"; this.inHTMLEntity = false; this.currentText += this.HTMLEntityBuffer; this.currentChar++; this.run(); return; } else if(this.inHTMLEntity) { this.HTMLEntityBuffer += this.origText.charAt(this.currentChar); this.currentChar++; this.run(); return; } else { this.currentText += this.origText.charAt(this.currentChar); } this.element.innerHTML = this.currentText; this.element.innerHTML += (this.currentChar < this.origText.length - 1 ? (typeof this.cursor == "function" ? this.cursor(this.currentText) : this.cursor) : ""); this.currentChar++; setTimeout("document.getElementById('" + this.element.id + "').typingText.run()", this.interval); } else { this.currentText = ""; this.currentChar = 0; this.running = false; this.finishedCallback(); } } </script> <div id="typing">* Ganti angka 50 untuk menyesuaikan kecepatan aliran teks. Jangan lupa beri komentar pada posting ini ya. Happy blogging!LETAKKAN TEXT atau KODE JAVASCRIPT DISINI!</div> <script type="text/javascript"> new TypingText(document.getElementById("typing"), 50, function(i){ var ar = new Array("_", "_", "_", "_"); return " " + ar[i.length % ar.length]; }); TypingText.runAll(); </script>
