Online

Statistik User

  • Pengunjung hari ini :0
  • Pengunjung Online :0
  • Total pengunjung :156

Social Networking

  •     

Sule-Soft on Android

  • sule-soft

Cara Membuat Animasi Typing Text di Website

Pernahkah kalian melihat website yang memasang iklan dengan animasi text typing? Kini anda pun bisa membuatnya!!

Dunia iklan terus berkembang pesat seiring dengan perkembangan teknologi dan sumber daya manusia yang ada. Pembuatan banner dan iklan dalam bentuk lainnya pun mengalami sejumlah pengembangan ke arah yang lebih efektif dan efisien, terutama dalam bentuk tampilan yang inovatif.

Kali ini Sule Soft akan men-share sedikit tentang Animasi Typing Text yang dapat kita pasang di website masing-masing. Langkah-langkah untuk membuatnya yaitu :

  • Buatlah file baru di Dreamweaver atau Graphic Interface lainnya
  • Ketiklah atau copas Source Code berikut ini di bawah code
<script language="JavaScript">

/**********************************************************
	Source Code by : Dahe Ugi
	Modify by      : Herman Sulaeman - Sule Soft
 **********************************************************/

// Masukan Variable Text yang akan ditampilkan
// Bila ada tambahan text bisa menambahkan newsText[5],[6].. dst
var newsText = new Array();
newsText[0] = "Selamat Datang di www.sule-soft.com"; // newText[0] ini hanya ditampilkan 1x saja
newsText[1] = "Sharing kali ini mengenai TYPING TEXT";
newsText[2] = "Dengan menggunakan javascript kita bisa membuat text dengan effect ketik";
newsText[3] = "Anda dapat mempelajari dan men-download source codenya disini";
newsText[4] = "Gratis!! Hanya di www.sule-soft.com";

var ttloop = 1; // Looping / Ulang selamanya?? (1 = True; 0 = False)
var tspeed = 50; // Pengaturan kecepatan ketikan dalam milidetik (Semakin besar angkanya = Semakin Lambat)
var tdelay = 1000; // Pengaturan waktu pergantian kalimat per milidetik

// ------------- BARIS INI JANGAN DI EDIT ------------- \\
var dwAText, cnews=0, eline=0, cchar=0, mxText;

function doNews() {
mxText = newsText.length - 1;
dwAText = newsText[cnews];
setTimeout("addChar()",1000)
}
function addNews() {
cnews += 1;
if (cnews <= mxText) {
dwAText = newsText[cnews];
if (dwAText.length != 0) {
document.news.news2.value = "";
eline = 0;
setTimeout("addChar()",tspeed)
}
}
}
function addChar() {
if (eline!=1) {
if (cchar != dwAText.length) {
nmttxt = ""; for (var k=0; k<=cchar;k++) nmttxt += dwAText.charAt(k);
document.news.news2.value = nmttxt;
cchar += 1;
if (cchar != dwAText.length) document.news.news2.value += "_";
} else {
cchar = 0;
eline = 1;
}
if (mxText==cnews && eline!=0 && ttloop!=0) {
cnews = 0; setTimeout("addNews()",tdelay);
} else setTimeout("addChar()",tspeed);
} else {
setTimeout("addNews()",tdelay)
}
}

doNews()
</script>
  • Langkah selanjutnya adalah menampilkannya dibrowser, yaitu dengan mengetikan code berikut ini
<form name="news">
<input type="text" size="110" name="news2" rows="1" style="background:#000 repeat scroll 0% 0%; border: 0px dotted rgb(255, 239, 249); color:#00FF00; height:20px; padding: 0px 150px; text-align:center; font-family:'Century Gothic'; font-size:12px;"></form>
  • Anda bisa merubah tampilan sesuai dengan selera anda sendiri. Misalnya dengan menambahkan perintah..dan sebagainya.
  • Kemudian Save as file anda tersebut dengan nama typingtext.html
  • Tekan F12 atau panggil file tersebut dengan Browser anda, dan lihatlah hasilnya

Demikian sedikit sharing dari kami mudah-mudahan lebih memperkaya kreasi pada website kita untuk lebih menarik lagi. Anda bisa melihat hasil demonya disini. Seperti biasa bila ada pertanyaan atau hal-hal yang Anda rasa kurang pahami, silahkan anda isi pertanyaan anda pada form comment di bawah ini. Go OpenSource!

Berita Terkait

Belum Ada Komentar

Isi Komentar