29
Nov
2009
Nov
2009
Cara membuat tulisan melayang 3D
Posted by: adminCara 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> |
memuat halaman
iklan
Postingan yang lain:
seru
makasih komentarnya..
Kereeen….!
Keren bgt tips2 nya, aku newbie soal javascript, kalo tips tulisan melayang 3D disimpan di bagian mana script?? .thx’z.
Kodenya itu kamu salin dan simpan menjadi text-melayang.html (bikin halaman tersendiri),
kemudian gunakan iframe untuk memunculkannya pada blog kamu.
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
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>
wah terima kasih mas diberi kesempatan tukeran link disini ,boleh khan mas tukeran linknya
boleh-boleh aja sob..
makasih tips nya,ini tips yang lagi w cari-cari,,kunjuin balik a blog w di (http://mandirimm.blogspot.com)
kayakmana sih caranya gak ngerti
caranya agak repot mbak..
pertama download kodenya, trus bikin file html dari kode tsb, kemudian filenya di upload ke file hosting, trus untuk nampilin text 3D nya gunakan kode iframe
agak susah sih…
maaf ni saya masih baru meluncur di dunia blogger jadi saya kurang paham dengan cra nyabisa posting cara nya beserta gambar nya gk ?
tolong bantu saya donk !
terimakasi
jika sudah di posting beritau saya ya supaya saya bisa liat bagai mana cara nya kirim ke gmail saya fernan.situmorang@gmail.com
tanks mas
maaf nih aku gak bikin tutorialnya,
klo mo pasang, kode css n javascriptnya itu taruh di bagian
<head>trus kode list untuk nampilin hurufnya, taruh di bagian gadget(blogspot)..
klo cara lainnya, kmu bikin kode yg diatas itu menjadi sebuah file berekstensi
.html, trus kmu upload filenya itu nanti ke file hosting gratisan, trus panggil file htmlnya menggunakan iframe ..aku gak punya tutorial bergambarnya sob.. sory ya…
Kurang Profesional..
masih amatirr
:v
tambahan buat masang iklan :
cukuhnau.co.cc/2011/01/cara-membuat-menu-melayang.html
Link Lainnya :
cukuhnau.co …
TERIMA KASIIIIIHH
kk gmn sih buat animasi 3d nya??
q coba g bisa??
tolong jelasin dong!!
ga ngerti
saya baru nih
jelasin dnk ,,,
terima kasih atas informasinya yang sangat mantafff