Membuat text bergerak pada lembar kerja html tampak sulit dan mudah apa lagi jika dilakukan oleh orang awam yang kurang mengerti dalam dunia web. Meraka kebinggungan dalam menggunakan kode2 atribut jika ingin menampilkan text bergerak2 pada lembar kerja mereka.
Padahal dalam membuat text bergerak hanya membutuhkan simple kode yaitu <marquee> data </marquee> tapi dalam tutorial ini saya akan membuat bagaimana membuat text bergerak2 secara satu persatu dawaktu atau delay tertentu.
1. Buka notepad atau dreamweaver atau software sejenisnya
2.Copy kode berikut :
Code:<html> <head> <title> Tutorial Text Bergerak</title> <script> TypingText = function(element, interval, cursor, finishedCallback) { if((typeof document.getElementById == "undefined") || (typeof element.innerHTML == "undefined")) { this.running = true; 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); 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> </head> <body> <div id="ndi"></div> <div id="kendii"> belajar membuat text bergerak mudah dan menyenangkan bukan ? :D</div> <script type="text/javascript"> new TypingText(document.getElementById("ndi")); // contoh pertama new TypingText(document.getElementById("kendii"), 90, function(i){ // menentukan delay waktu kurso sampai akhir yang di tentukan, contoh 90 var ar = new Array("_"," ","_"," "," "); return " " + ar[i.length % ar.length]; }); TypingText.runAll(); </script> </body> </html>
3.lalu save dan beri nama file test.html
Silakan di modifikasi dan berexperiment ria lah. Semoga bermanfaat. Jika ada yang kurang jelas silakan tinggalkan komentar :)
mantab cak
ReplyDeleteterima kasih :)
DeleteBagus artikel nya.
ReplyDeleteterima kasih, :)
Deletekalo nambahkan warna dan diubah dari kanan ke kiri gimana kakak..?
ReplyDelete1. kalo buat nambahin warna bisa atibut css. tambahin kode ini di atas < / head >
Deletecek : http://jsfiddle.net/ndikendii/JHydd/
2. maksud nya di ubah dari kiri ke kanan gimana ya, gerak2 gitu bukan ?