Cara membuat tulisan melayang 3D

Anda pernah tahu tulisan 3D yang melayang-layang di blogger orang lain ?? nah kalau anda tahu itu bagus kan, kita sekarang akan belajar membuatnya. mari langsung saja kita belajar membuatnya.

Cara buat tulisan melayang 3D

1. Login ke blogger
2. Pilih Rancangan

3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukan kode HTML berikut ini

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>3D Flying Text</title>

body{

background:#fff;

margin:0;

overflow:hidden;

padding:0;

}

li{

color:#ddd;

font:bold 13px Arial,sans-serif;

list-style: none;

}

text-decoration:none;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

//Setup Arrays that will hold the x,y,z of each element.

var x = new Array();

var y = new Array();

var z = new Array();

//Get the list of items.

var items = $('li');

//Animate the items.

function animate()

{

//Step through each item.

for(i = items.length - 1; i >= 0; i--){

//variables for movement.

var xVar = 50 + x[i] // x value

var yVar = 50 + y[i] * z[i]++; // y value, move towards bottom of screen

var zVar = 10 * z[i]++; // z value, text get larger.

//Check to see if text position is still on the screen.

// the #'s are %. 100 is far right or bottom, 0 is top or left.

// for z value it's the font size in %.

if (!xVar | xVar < 0 | xVar > 90|

yVar < 0 | yVar > 90 |

zVar < 0 | zVar > 1500)

{

//if it's off the screen randomly pick a starting place.

x[i]= Math.random() * 2 - 1;

y[i] = Math.random() * 2 - 1;

z[i] = 2;

}

else

{

//if it's still on the screen apply the appropiate styles.

$(items[i]).css("position", "absolute"); // make sure we can move the text around.

$(items[i]).css("top", xVar+"%"); // y value

$(items[i]).css("left", yVar+"%"); // x value

$(items[i]).css("fontSize", zVar+"%"); // font size (illusion of perspective.)

$(items[i]).css("opacity",(zVar)/3000); // fade in from the distance.

}

setTimeout(animate, 9);

}

animate();

</script>

</html>

6. Simpan jika sudah selesai.

7. Lihat hasilnya...!!!

Ditulis Oleh : Unknown

Anda sedang membaca artikel tentang Cara membuat tulisan melayang 3D di Redonewest, Sobat diperbolehkan mengcopas atau menyebar-luaskan artikel ini, tapi jangan lupa untuk meletakkan link Ahli Webs atau link dibawah sebagai sumbernya.

<a alt="Cara membuat tulisan melayang 3D" href="http://redonewest.blogspot.com/2011/05/cara-membuat-tulisan-melayang-3d_27.html" target="_blank" title="Cara membuat tulisan melayang 3D">Cara membuat tulisan melayang 3D</a>