5.22.2012

Cara membuat kursor melayang ( 100% work )


Cara membuat kursor melayang / meliuk liuk berputar seperti punya saya ( pengen khannn ....hehe )

  • Kode CSS  (  copy kode di bawah )
    #outerCircleText {
           font-weight:500;
           color:red;
           text-shadow:1px 1px 1px #000;
           font-family: "MS Serif", "New York", serif;
           position:absolute;
           top:0;
           left:0;
           z-index:3000;
           cursor:default;
    }
    #outerCircleText div{position:relative;}
    #outerCircleText div div{position:absolute;top:0;
     
    Buka blog -> dasbor -> template -> edit html 
    paste kode tadi di atas  ]]></b:skin>
     
    kemudian
     
    copy kode javascript di bawah ini
    <script type="text/javascript">
    //<![CDATA[
    /* by Tim Tilton * http://www.tempermedia.com/ * http://www.dynamicdrive.com/ * modif by: ihzanurulainy */ 
    ;
    (function () {
            var msg = "ihza nurul ainy * "; /* teks cursor */
            var size = 22; /* font size */
            var circleY = 0.75; /* lebar diameter arah vertikal (y) */
            var circleX = 2;  /* lebar diameter arah horizontal (x) */
            var letter_spacing = 4; /* spasi texs semakin besar semakin rapat */
            var diameter = 18; /* diameter lingkaran standart max 20 */
            var rotation = 0.1; /* kecepatan putaran --> gunakan 0.1 s/d 0.2 */
            var speed = 0.8; /* kecepatan text mengikuti cursor semakin kecil semakin lambat */
            if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
            msg = msg.split('');
            var n = msg.length - 1,
            a = Math.round(size * diameter * 0.208333),
            currStep = 20,
            ymouse = a * circleY + 20,
            xmouse = a * circleX + 20,
            y = [],
            x = [],
            Y = [],
            X = [],
            o = document.createElement('div'),
            oi = document.createElement('div'),
            b = document.compatMode && document.compatMode != "BackCompat" ? document.documentElement: 
            document.body,
            mouse = function (e) {
                    e = e || window.event;
                    ymouse = !isNaN(e.pageY) ? e.pageY: e.clientY;
                    xmouse = !isNaN(e.pageX) ? e.pageX: e.clientX;
            },
    
            makecircle = function () {
                    if (init.nopy) {
                            o.style.top = (b || document.body).scrollTop + 'px';
                            o.style.left = (b || document.body).scrollLeft + 'px';
                    };
                    currStep -= rotation;
                    for (var d, i = n; i > -1; --i) { // makes the circle
               d = document.getElementById('iemsg' + i).style;
               d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY + 85) + 'px';
               d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
                    };
            },
    
            drag = function () {
                    y[0] = Y[0] += (ymouse - Y[0]) * speed;
                    x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
      for (var i = n; i > 0; --i) {
                            y[i] = Y[i] += (y[i - 1] - Y[i]) * speed;
                            x[i] = X[i] += (x[i - 1] - X[i]) * speed;
                    };
                    makecircle();
            },
    
            init = function () { 
                    if (!isNaN(window.pageYOffset)) {
                            ymouse += window.pageYOffset;
                            xmouse += window.pageXOffset;
                    } else init.nopy = true;
                    for (var d, i = n; i > -1; --i) {
                            d = document.createElement('div');
                            d.id = 'iemsg' + i;
                            d.style.height = d.style.width = a + 'px';
                            d.appendChild(document.createTextNode(msg[i]));
                            oi.appendChild(d);
                            y[i] = x[i] = Y[i] = X[i] = 0;
                    };
                    o.appendChild(oi);
                    document.body.appendChild(o);
                    setInterval(drag, 25);
            },
    
            ascroll = function () {
                    ymouse += window.pageYOffset;
                    xmouse += window.pageXOffset;
                    window.removeEventListener('scroll', ascroll, false);
            };
    
            o.id = 'outerCircleText';
            o.style.fontSize = size + 'px';
    
            if (window.addEventListener) {
                    window.addEventListener('load', init, false);
                    document.addEventListener('mouseover', mouse, false);
                    document.addEventListener('mousemove', mouse, false);
                    if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false);
            }
            else if (window.attachEvent) {
                    window.attachEvent('onload', init);
                    document.attachEvent('onmousemove', mouse);
            };
    
    })();
    //]]>
    </script>
     
    paste  kode javascript tersebut diatas </head>
     
    jangan lupa ya ganti nama ihza nurul ainy ( di dalam javascript )
    dengan nama sesuai keinginanmu 
     
    Warna font dapat dirubah melalui kode CSS (color)
     
    okey  selamat mencoba ya
     
    sumber:
     
    http://www.dynamicdrive.com/ 
    
    
    
    
     

Tidak ada komentar:

Posting Komentar

Boleh berkomentar tapi yang sopan ya ...salam manis dan tetap semangat