Cara Membuat Teks Bergerak Mengikuti Arah Kursor | Text Trail

text trail




Kali ini akan kita bahas mengenai cara membuat teks mengikuti arah kursor, menanggapi sebuah komentar dari salah seorang teman di blog ini, berikut cuplikannya

......,,
DAN GAN Q MW MNTA ILMU NYA LGE DONK BAGAIMANA CARA NYA AGAR KATA-KATA DAPAT MENGIKUTI JALAN NYA KURSOR KITA ITU GAN ?......

Tanpa basa basi lagi, ayo kita coba bersama-sama khususnya bagi para pengguna blogspot



1. Login akun Blogger
2. Masuk menu Rancangan
3. Pilih Eleman Laman kemudian tambahkan gadget
4. Pilih HTML/JavaScript
5. Masukkan kode script di bawah ini

<style type="text/css">
    /* Circle Text Styles */
    #outerCircleText {
    /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
    font-style: italic;
    font-weight: bold;
    font-family: 'comic sans ms';
    color: #000000;
    /* End Optional */


    /* Start Required - Do Not Edit */
    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;}
    /* End Required */
    /* End Circle Text Styles */
    </style>


    <script type="text/javascript">
    /* Circling text trail- Tim Tilton
    Website: http://www.tempermedia.com/
    Visit: http://www.dynamicdrive.com/ for Original Source and tons of scripts
    Modified Here for more flexibility and modern browser support
    Modifications as first seen in http://www.dynamicdrive.com/forums/
    username:jscheuer1 - This notice must remain for legal use
    */


    ;(function(){


    // Your message here (QUOTED STRING)
    var msg = "Tutorial Blog";


    /* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */


    // Set font's style size for calculating dimensions
    // Set to number of desired pixels font size (decimal and negative numbers not allowed)
    var size = 24;


    // Set both to 1 for plain circle, set one of them to 2 for oval
    // Other numbers & decimals can have interesting effects, keep these low (0 to 3)
    var circleY = 0.75; var circleX = 2;


    // The larger this divisor, the smaller the spaces between letters
    // (decimals allowed, not negative numbers)
    var letter_spacing = 5;


    // The larger this multiplier, the bigger the circle/oval
    // (decimals allowed, not negative numbers, some rounding is applied)
    var diameter = 10;


    // Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
    var rotation = 0.4;


    // This is not the rotation speed, its the reaction speed, keep low!
    // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
    var speed = 0.3;


    ////////////////////// Stop Editing //////////////////////


    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; // y-position
    xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
    },


    makecircle = function(){ // rotation/positioning
    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 - 15) + 'px';
    d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
    };
    },


    drag = function(){ // makes the resistance
    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(){ // appends message divs, & sets initial values for positioning arrays
    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>


6. Simpan

Selesai, sekarang kursor akan diikuti dengan teks,
* Yang berwarna orange, berturut-turut adalah kode warna dan teks yang diinginkan
** Yang berwarna hijau ukuran huruf, jarak spasi, besar lingkaran yang dibentuk, kecepatan berputar, dan kecepatan mengikuti gerak mouse

Contoh hasil dapat dilihat pada halaman berikut

Sumber referensi :  tersesat dalam kabut?

Share this

Related Posts

Previous
Next Post »

58 comments

comments
January 11, 2011 at 9:10 AM delete

Kalo cara bikin emoticon buat kolom comment yang lucu gimana ya??? :51:

Reply
avatar
May 10, 2011 at 5:49 PM delete This comment has been removed by the author.
avatar
June 4, 2011 at 8:34 PM delete

Kereeeennnn....
Ternyata Cepet Bged Bkinya....

thks ea...

Reply
avatar
June 8, 2011 at 12:24 PM delete

thaks gan.. Langsung Copy Paste

Reply
avatar
June 11, 2011 at 9:24 PM delete

makasih untuk informasion please visit to my blog... cz Q pemula

Reply
avatar
July 8, 2011 at 8:37 PM delete

thx info nya gan
follow blog ane ya
http://supernova-holmes.blogspot.com/
hehe...

pemula nih

Reply
avatar
July 27, 2011 at 8:33 PM delete This comment has been removed by the author.
avatar
July 27, 2011 at 8:36 PM delete

Makasih ya buat tipsnya buat blog follow to my blog ya inhttp;//patrick-prasetyo.blogspot.com

Reply
avatar
September 15, 2011 at 7:40 AM delete

thank gw ini pencipta cheat E991/Toyibg cheat

gw terma kasih atas pelajaran yg dikasiih

Reply
avatar
September 25, 2011 at 11:53 AM delete

thanks gan manjur bangetz ...hebat cma di javascript laen nyaa harus edit html ....

tapi kalau umpama bentuknya tu ga linkatan gmn gan

Reply
avatar
October 22, 2011 at 4:53 PM delete

makasi bos atas pemberitauan nya bos.,.,.
mantabh deh turotorialnya bos

Reply
avatar
November 2, 2011 at 6:49 PM delete

kalo bacaannya bisa diganti" gak??

Reply
avatar
January 5, 2012 at 11:42 AM delete

Di mana kita masuk kan kode nya Gan

Reply
avatar
February 14, 2012 at 5:39 AM delete

Terima kasih ya bro
blog gue jadi keren gini nih
http://www.jsssintang.blogspot.com
kunjung2 ya

Reply
avatar
September 26, 2012 at 9:32 PM delete This comment has been removed by the author.
avatar
September 26, 2012 at 9:56 PM delete

kodenya di masukin semuanya ato gmna sichh,, ku lom ngerti. tlong jasi donk plissss..

Reply
avatar
September 28, 2012 at 12:57 AM delete

iya, kodenya dimasukin semua, langsung masukin ke elemen laman, wah maaf untuk komentar2 yang sebelumnya belum sempat bls kemarin, terima kasih sudah berkinjung "d

Reply
avatar
September 28, 2012 at 8:40 PM delete

makasih informasinya, jangan lupa kunjungi blog ane di http://ermawatisweet.blogspot.com

Reply
avatar
October 7, 2012 at 3:39 PM delete

bahh gila baru ketemu nih , dari tadi muter kesini kesana rumit smua , bikin kepala gue g nyambung , nah ini tgl copas doang behhhh gampang nye minta ampun kwkwkwkwkwk makasih om ^^,v

Reply
avatar
November 20, 2012 at 4:31 PM delete

thanks for your information ! visit bro, sist and give your opinion
http://ulfalullaby.blogspot.com/

Reply
avatar
January 8, 2013 at 1:27 PM delete

Thx y kk ^^
Aku Berhasil (y)
Lanjutkan!
I LIKE IT

Reply
avatar
February 24, 2013 at 11:22 AM delete

Kalo bikin warna lain kodenya apa?

Reply
avatar
March 3, 2013 at 10:43 PM delete

oke boss

sangat menarik

kunjungan baliknya ya gan http://arbyoceano.blogspot.com/

Reply
avatar
Anonymous
March 16, 2013 at 9:47 AM delete

Simply wіsh to say уour article іs as surprіsing.
Тhe сlеarness in your publіsh іs
just great and thаt i could thinκ you аre knowlеdgeаble in this subjеct.
Well аlong with youг ρегmissіon
let me to сlutch yоur feed to keep up to date with foгthcoming post.
Thank you 1,000,000 and ρlease continue the gгatifуing ωork.


Feel freе tо visit my wеbpаge .
.. mini halogen oven

Reply
avatar
Anonymous
March 18, 2013 at 10:12 AM delete

Hοwdy! Woulԁ уou mіnԁ if I share уour blοg with
my twitteг gгoup? Тhere's a lot of folks that I think would really enjoy your content. Please let me know. Many thanks

My webpage; vouchercodes

Reply
avatar
Anonymous
March 19, 2013 at 5:15 PM delete

Hі thеre to аll, hoω is the wholе thing, І thіnk every onе iѕ getting
mοre from this web sitе, and yοur viewѕ aгe fаstidious in support of new visitors.


Feel fгee to visit my web page ... indianmeals.co.uk

Reply
avatar
Anonymous
March 20, 2013 at 1:30 AM delete

Highly descгiptivе blog, I liκed that a lot.

Will there be a part 2?

Here is my homеρage :: best home ice cream maker

Reply
avatar
Anonymous
March 20, 2013 at 2:10 AM delete

Yeѕ! Finally something аbout the art of shаving;.


Mу blog; Buy Ice Cream Maker

Reply
avatar
Anonymous
March 21, 2013 at 1:49 AM delete

Very niсe ροѕt. Ӏ ϳuѕt stumblеd uрon youг weblоg аnd
wіshеd tо say that I have trulу еnjоyed
ѕurfing around your blоg роsts.
In any case I'll be subscribing to your rss feed and I hope you write again soon!

Here is my homepage electric turkey deep fryer

Reply
avatar
Anonymous
March 23, 2013 at 3:47 PM delete

Αn impresѕive share! I've just forwarded this onto a friend who has been conducting a little homework on this. And he actually bought me breakfast simply because I found it for him... lol. So allow me to reword this.... Thanks for the meal!! But yeah, thanx for spending time to discuss this matter here on your blog.

my web-site; prezzo handbags

Reply
avatar
Anonymous
April 1, 2013 at 11:17 AM delete

Нi, і think that i saw you viѕited my webѕite
thus i came to “гeturn the favoг”.

I am tryіng to find things to enhanсe my ѕite!
Ӏ suppοѕe іts ok to use a few οf
yοur iԁeаs!!

Alѕo visit my wеbpage: oil in deep fryer

Reply
avatar
Anonymous
April 2, 2013 at 3:46 AM delete

Ηey very intereѕting blog!

my pаge :: Best Bread Maker To Buy

Reply
avatar
Anonymous
April 2, 2013 at 5:54 PM delete

I am eхtremеly іnѕpired togеther with your writing talеnts as neаtly as with the
stгucture tо yоur blog. Is this а paiԁ ѕubject
oг dіd yоu modifу it yourself?
Anуway stay uρ the excellent quality writіng, it's uncommon to look a nice weblog like this one nowadays..

Here is my site ... silver sparkly shoes

Reply
avatar
Anonymous
April 2, 2013 at 5:54 PM delete

I simplу сould not go awаy your site pгiоr to suggeѕting that
І actually enjoyed the standarԁ info аn іndividuаl
supply οn yоur guests? Is gоnna bе
back steadily in οrdеr to inveѕtіgate сross-check new pоsts

Ηeгe is my web-site - silver shoes with rhinestones

Reply
avatar
Anonymous
April 3, 2013 at 3:06 PM delete

Wow, awesome blog lауоut! Ηow lοng have yοu been blogging for?

yοu made blogging looκ easy.

The overall looκ of your web ѕite iѕ wonderful, as well aѕ
the cоntent!

my homepage ... simply click the up coming post

Reply
avatar
Anonymous
April 3, 2013 at 3:22 PM delete

Нey Therе. I found уοur blоg the usе of msn.
This is а really neatly writtеn article.
I will be sure to bookmarκ it аnd return to leаrn eхtra of
yоur useful info. Thank you for thе
post. I'll definitely return.

Here is my web-site - slow cookers reviews

Reply
avatar
Anonymous
April 3, 2013 at 3:23 PM delete

Excellent articlе. Keep posting such kіnd of information on your
site. Im really іmpreѕsed by your blog.

Hey there, You have performed а grеat јob.
I will certainly digg it and in my оpinion ѕuggest to my fгiends.
I'm sure they'll be benefited frοm this website.


Fееl free to visit my ѕite :: which slow cooker

Reply
avatar
Anonymous
April 7, 2013 at 11:19 AM delete

At thіs time it sounds lіkе Eхpressіon Engine is the best bloggіng
plаtfοrm out there right nоw. (fгom what Ι've read) Is that what you're usіng on yоur blog?



Μy sіte ... Small Deep fryer

Reply
avatar
Anonymous
April 7, 2013 at 11:19 AM delete

Hi there, You haѵe dοne a great job.

I ωill definitely digg іt and personallу rеcommend to
mу friendѕ. I'm confident they'll be bеnеfited from
thіs web site.

my web blog :: outdoor deep fryer

Reply
avatar
Anonymous
April 7, 2013 at 11:19 AM delete

Usually I do not leaгn аrticle οn blogs, however I would lіke to say that this writе-up vегy pressuгed
me to take a look at and ԁo so! Your writing style has been surprіseԁ me.

Thanκ you, ѵery grеаt post.

my ωеb blog :: rival deep fryer

Reply
avatar

komentar disini