Cursor Circling Text Trail Teks Kolecer

Cursor ieu saleresna metot pisan margi animasi na anu geulis sarta gampangna pamake ngalakukeun sababaraha pangaturan deui supados circling text trail tiasa dipidangkeun luyu kahayang. Ngan hiji perkawis anu karasaeun ngaganggu pisan,yen circling text trail anu muter ngurilingan cursor sering teuing janten pengganggu sabot nu datang mecoba ngalakukeun aktivitas peryogi sepertos copy atawa muka link.

Dina posting ieu kuurang tos dirobah sakedik parobahan dina javascript supados animasi anu tercipta henteu kaleuleuwihan teuing sakaligus kuurang oge tos dirobih posisi teks ka cursor supados sanaos teks muter ieu sok satia ngilu ngiring dina cursor nanging henteu  barobah kaayaannana nungganggu anu ngarugikeun.

Kode CSS :

#outerKolecerText {
       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;
}
#outerKolecerText div{position:relative;}
#outerKolecerText div div{position:absolute;top:0;left:0;text-align: center;}

Javascript :

<script type="text/javascript">
//<![CDATA[
/* by Tim Tilton * http://www.tempermedia.com/ * http://www.dynamicdrive.com/ * modif by: mitrabewarasunda */ 
;
(function () {
        var msg = "mitrabewarasunda * Tutorial * "; /* teks cursor */
        var size = 22; /* font size */
        var circleY = 0.75; /* rubakna diameter arah vertikal (y) */
        var circleX = 2;  /* rubak diameter arah horizontal (x) */
        var letter_spacing = 4; /* spasi texs beuki ageung beuki rapet */
        var diameter = 18; /* diameter bunderan standart max 20 */
        var rotation = 0.1; /* kecepatan puteran --> anggo 0.1 s/d 0.2 */
        var speed = 0.8; /* kecepatan text ngiring cursor beuki alit beuki alon */
        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 = 'outerKolecerText';
        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>

Cara Ngagunakeunnana :

1. Simpen kode CSS di luhur ]]></b:skin>
2. Simpen javascript di luhur </head> atau di luhur </body>
3. Ganti teks mitrabewarasunda * Tutorial * (di javascript) ku teks anu dipikahoyong kumaraneh pintonkeun di cursor.
4. Sababaraha pangaturan atos aya pitunjuk di javascript.
5. Kelir atawa warna font tiasa dirubah ngaliwatan kode CSS (color).

Sumber :

http://www.dynamicdrive.com/

Mangga oge buka Anu Lucu sejen nu narik pisan sarta pantes di turutan kabeh. Akses ngaliwatan link handap ieu :

  Posting » Poe saptu PAHING, Pebuari, 07, 2014

» Happy Blogging - mitrabewarasunda «