Title Bar Animation

Agar tampilan Blog tidak membosankan, kita bisa mempercantik tampilan Blog dengan Title Animation. Title animation tuh apaan sih?? Coba kamu liat diujung kiri atas browser kamu,, Contohnya lihat Title Bar pada Blog ini,, Nah.. contohnya kayak gitu,, tapi banyak nbgt macemnya ntuh,, gag cuman kayak gtu doank,, Kalo masih gag tau Title Bar juga, Hmmhh,, Liat gambar disamping ne:

Mempercantik tampilan Title tu banyak
macamnya, Kita bisa mengkreasikannya sendiri (asal ngerti javascript, w sndiri gag bisa javascript (T.T) ) Hehehehe,, Tpi ne macam-macam Title Bar Animationnya:

Title Move

Anak anak,, ada yang tau title move gag?? Gag tau buguru,,, Kalo gag tau ya udah,, gw sndiri jugah gag tau,, hahahahahaha,,, title move tu Title pada Title Bar browser kamu akan bergerak dari kanan ke kiri, Bisa kita setting satu kali gerakan saja atau berulang ulang (ampe mampus gitu,, wkwkwkwk)
Kalo Pengen Title Move tu yang kayak gimana,
Ne contohnya:
DEMO
<script type="text/javascript" src="http://dickelodeonjs.googlecode.com/files/DADtitlemovescript.txt"> </script>

Bouncing Title

Hah? Apaan ntuh?? Ntuh ada sesuatu yang mendal mendal, alah,, bahasanya jelek, hehehehe,, maklum,, gag pernah bikin artikel,, Daripada lama lama,, mending langsung liat contohnya aja,, sekalian copy scriptnya getoh,,,

DEMO

<script type="text/javascript">
//Bouncing Title http://darkard.blogspot.com/2010/03/title-bar-animation.html
<!-- Begin
var message = new Array();
// Set your messages below -- follow the pattern.
// To add more messages, just add more elements to the array.
message[0] = "Pesan 1";
message[1] = "Pesan 2";
message[2] = "Pesan 3";
message[3] = "Pesan 4";
message[4] = "Pesan 5";
message[5] = "Pesan 6";
message[6] = "Pesan 7";

// Set the number of repetitions (how many times the arrow
// cycle repeats with each message).
var reps = 2;
var speed = 200; // Set the overall speed (larger number = slower action).

// DO NOT EDIT BELOW THIS LINE.
var p = message.length;
var T = "";
var C = 0;
var mC = 0;
var s = 0;
var sT = null;
if (reps < 1) reps = 1;
function doTheThing() {
T = message[mC];
A();
}
function A() {
s++;
if (s > 8) { s = 1;}
// you can fiddle with the patterns here...
if (s == 1) { document.title = '||||||====||| '+T+' -----'; }
if (s == 2) { document.title = '|||=|||===||| '+T+' -----'; }
if (s == 3) { document.title = '|||==|||==||| '+T+' -----'; }
if (s == 4) { document.title = '|||===|||=||| '+T+' -----'; }
if (s == 5) { document.title = '|||====|||||| '+T+' -----'; }
if (s == 6) { document.title = '|||===|||=||| '+T+' -----'; }
if (s == 7) { document.title = '|||==|||==||| '+T+' -----'; }
if (s == 8) { document.title = '|||=|||===||| '+T+' -----'; }
if (C < (8 * reps)) {
sT = setTimeout("A()", speed);
C++;
}
else {
C = 0;
s = 0;
mC++;
if(mC > p - 1) mC = 0;
sT = null;
doTheThing();
}
}
doTheThing();
// End -->
</script>
Ganti kode yang berwarna Merah diatas dengan kata-katamu sendiri...

Radar Title

Apa apaan lagi sih ni,, Radar Title?? Geli ditelinga, Namanya aneh banget,, Susah juga mo jelasinnya,, makanya,, Daripada penasaran, liat aja ndiri contohnya kayak gimana,, biar gag bingung lagi:

DEMO

<script type="text/javascript">
//Radar Title http://darkard.blogspot.com/2010/03/title-bar-animation.html
var titletext="MASUKKAN KATA KATA KAMU SENDIRI"
var thetext=""
var started=false
var step=0
var times=1
function welcometext()
{
times--
if (times==0)
{
if (started==false)
{
started = true;
document.title = titletext;
setTimeout("anim()",1);
}
thetext = titletext;
}
}
function showstatustext(txt)
{
thetext = txt;
setTimeout("welcometext()",4000)
times++
}
function anim()
{
step++
if (step==9) {step=1}
if (step==1) {document.title='>-----'+thetext+'-----<'}
if (step==2) {document.title='->----'+thetext+'----<-'}
if (step==3) {document.title='>->---'+thetext+'---<-<'}
if (step==4) {document.title='->->--'+thetext+'--<-<-'}
if (step==5) {document.title='>->->-'+thetext+'-<-<-<'}
if (step==6) {document.title='->->->'+thetext+'<-<-<-'}
if (step==7) {document.title='--->--'+thetext+'--<---'}
if (step==8) {document.title='-->---'+thetext+'---<--'}
setTimeout("anim()",200);
}
if (document.title)
window.onload=onload=welcometext
</script>
Ganti kode yang berwarna Merah diatas dengan kata-katamu sendiri...

Typing And Scroll Title

Dari namanya udah jelas khan?? Typing And Scroll Title,, Jadi title barnya ntuh kena effect "Diketik" dulu, trus di scroll alias digulung kesebelah kiri,, trus diketik lagi,, di scroll lagi,, Untuk jelasnya,, liat aja contohnya langsung biar puas ngliatnya,,

DEMO

<script type="text/javascript">
//Typing And Scroll Title http://darkard.blogspot.com/2010/03/title-bar-animation.html
var rev = "fwd";
function titlebar(val){
var msg = "MASUKKAN KATA KATA KAMU DISINI";
var res = " ";
var speed = 100;
var pos = val;
msg = " {[== "+msg+" ==]}";
var le = msg.length;
if(rev == "fwd") {
if(pos < le) {
pos = pos+1;
scroll = msg.substr(0,pos);
document.title = scroll;
timer = window.setTimeout("titlebar("+pos+")",speed);}
else {
rev = "bwd";
timer = window.setTimeout("titlebar("+pos+")",speed);}}
else {
if(pos > 0) {
pos = pos-1;
var ale = le-pos;
scrol = msg.substr(ale,le);
document.title = scrol;
timer = window.setTimeout("titlebar("+pos+")",speed);}
else {
rev = "fwd";
timer = window.setTimeout("titlebar("+pos+")",speed);}}}
titlebar(0);
</script>
Ganti kode yang berwarna Merah diatas dengan kata-katamu sendiri...
Comments

No comments:

Related posts
Guestbook
Author


© 2008 - 2016 DickeyMaru
Blogger Template Win 8 design by Dark Ard from DeezClan | All rights reversed.
  • Post
  • Comments
  • Related
  • Guestbook
  • Author
  • Other