Cursor Circling Text Trail Teks Berputar

Cursor ini sebenarnya sangat menarik karena animasinya yang cantik serta mudahnya pengguna melakukan beberapa pengaturan ulang agar circling text trail dapat ditampilkan sesuai keinginan. Hanya satu hal yang terasa amat mengganggu, bahwa circling text trail yang berputar mengitari cursor terlalu sering jadi pengganggu ketika pengunjung mecoba melakukan aktivitas penting seperti copy atau membuka link.

Dalam posting ini kita telah lakukan sedikit perubahan pada javascript agar animasi yang tercipta tidak terlalu berlebihan sekaligus kita juga telah rubah posisi teks terhadap cursor agar sekalipun teks berputar ini selalu setia mengikuti cursor namun tidak lagi menjadi pengganggu yang merugikan. Anda bisa melihat dalam demo dimana terlihat animasi teks berputar sudah berpindah di bawah cursor.

D E M O

Kode CSS :

#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;left:0;text-align: center;}

Javascript :

<script type="text/javascript">
//<![CDATA[
/* by Tim Tilton * http://www.tempermedia.com/ * http://www.dynamicdrive.com/ * modif by: gubhugreyot */ 
;
(function () {
        var msg = "gubhugreyot * Tutorial * "; /* 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>

Cara Menggunakan :

1. Simpan kode CSS di atas ]]></b:skin>
2. Simpan javascript di atas </head> atau di atas </body>
3. Ganti teks gubhugreyot * Tutorial * (di javascript) dengan teks yang ingin anda tampikan di cursor.
4. Beberapa pengaturan telah ada petunjuknya di javascript.
5. Warna font dapat dirubah melalui kode CSS (color).
6. Agar cara pasang dan cari kode lebih jelas anda bisa baca Cara Backup Template dan Cara Cepat Cari Kode di Special Tutorials pada menu sebelah kiri!

Sumber :

http://www.dynamicdrive.com/

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Ngahad PAHING, Maret, 04, 2012

» Happy Blogging - gubhugreyot «