Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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.



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 «

12 komentar:

  1. untuk ganti warnanya dimana y gan?mksh

    BalasHapus
  2. Pro : ᚘᚔᚘSIPUTᚘᚔᚘ
    Rubah warna di kode css spt yang terlihat di bawh ini :

    #outerCircleText {
    font-weight:500;
    color:red;

    color:red; ganti red dengan merah atau abang , ... he ... he .. he .. ... ganti dengan blue atau yang lain, gitu !

    Salam ...

    gubhugreyot

    BalasHapus
  3. oya jk ada waktu mampir ya gan.sekalian mohon masukannya.mklm msh baru.

    BalasHapus
  4. gimana cara klow teks sejajar dg kursor

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. gan gimana caranya biar background dihalaman web bisa transfaran, buat halaman web, kalau blog kan dah ada fasilitasnya dah disediain.
    saya pelajar smk rekayasa perangkat lunak mau bikin halaman web buat uji kom, tolong dibantu ya gan!!

    BalasHapus
  7. g bisa sama sekali uda coba berjam jam , mungkin saya kurang paham apa g mudeng sih , hehehe

    BalasHapus
  8. gan mau tanya kalau maksud nya ini di mana ? Simpan kode CSS di atas skin
    Simpan javascript di atas head atau di atas body

    maklum lah baru belajar nih

    BalasHapus
  9. Gan, Kemaren Cursor circling Text Trail Nya Ada......
    tapi kok ke esokkan hari nya gk ada yea ???
    malah ada tulisan aneh gitu....

    tolong penjelasan nya dong gan

    BalasHapus

 
GR | Edited by | gubhug reyot