Jasa Desain Website Murah
Jasa buat web untuk bisnis online, web pribadi, web portal, atau web apa saja tersedia di Ahli Webs

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>
        <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>

6. Simpan jika sudah selesai.
7. Lihat hasilnya...!!!

Ditulis Oleh :

Ridwan Ahli Webs 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.
Description: Cara membuat tulisan melayang 3D Rating: 4.5 Reviewer: Ridwan AhliWebsCom ItemReviewed: Cara membuat tulisan melayang 3D
Posted by: Ahli Webs
Ahli Webs Updated at: 20.31

0 komentar

Posting Komentar

Silahkan Beri Komentar..!!