29
Nov
2009
Nov
2009
Cara membuat tulisan melayang 3D
Cara membuat text/tulisan melayang (3D flying text).
Silahkan lihat demo dibawah ini.
Demo:
Kode:
Download text-melayang.txt
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>3D Flying Text</title> <style type="text/css" media="screen"> body{ background:#fff; margin:0; overflow:hidden; padding:0; } li{ color:#ddd; font:bold 13px Arial,sans-serif; list-style: none; } a{ text-decoration:none; } </style> </head> <body> <ul> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> <li><a href="#">D</a></li> <li><a href="#">E</a></li> <li><a href="#">F</a></li> <li><a href="#">G</a></li> <li><a href="#">H</a></li> <li><a href="#">I</a></li> <li><a href="#">J</a></li> <li><a href="#">K</a></li> <li><a href="#">L</a></li> <li><a href="#">M</a></li> <li><a href="#">N</a></li> <li><a href="#">O</a></li> <li><a href="#">P</a></li> <li><a href="#">Q</a></li> <li><a href="#">R</a></li> <li><a href="#">S</a></li> <li><a href="#">T</a></li> <li><a href="#">U</a></li> <li><a href="#">V</a></li> <li><a href="#">W</a></li> <li><a href="#">X</a></li> <li><a href="#">Y</a></li> <li><a href="#">Z</a></li> </ul> </body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //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> |

Postingan yang lain:









Tanggal 15 Desember 2009 jam 4:51 am
seru
Tanggal 15 Desember 2009 jam 8:01 am
makasih komentarnya..
Tanggal 27 Desember 2009 jam 6:02 pm
Kereeen….!
Tanggal 29 Desember 2009 jam 3:27 pm
Keren bgt tips2 nya, aku newbie soal javascript, kalo tips tulisan melayang 3D disimpan di bagian mana script?? .thx’z.
Tanggal 29 Desember 2009 jam 5:17 pm
Kodenya itu kamu salin dan simpan menjadi text-melayang.html (bikin halaman tersendiri),
kemudian gunakan iframe untuk memunculkannya pada blog kamu.
Tanggal 10 Februari 2010 jam 3:58 pm
mat sore senior admin yg hebat.. saya adalah newbie dan sangat newbie di dunia blogger. dengan berkunjung ke sini saya menjadi bisa dapat ilmu dan akan jadi kenangan selamanya. saya bertanya nih dimanakah tex yg akan di ganti jika kita ingin tek yg melayang itu adalah nama kita ?? makasih salam takjub
Tanggal 11 Februari 2010 jam 8:44 pm
kalo mau mnggnti isi text dgn nama,
tinggal ganti huruf yg ada diantara tag
contoh:
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
gnti hurufnya dgn nama:
<li><a href="#">RAHMAN</a></li>
Tanggal 10 Februari 2010 jam 5:31 pm
wah terima kasih mas diberi kesempatan tukeran link disini ,boleh khan mas tukeran linknya
Tanggal 11 Februari 2010 jam 8:24 pm
boleh-boleh aja sob..