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 your views...

58 Respones to "Cara Membuat Teks Bergerak Mengikuti Arah Kursor | Text Trail"

enoy mengatakan...

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


11 Januari 2011 09.10
aan jaka prasetiyo mengatakan...

GAN THANKS YAA ILMUNYA


12 April 2011 22.34
fredysrgh.blogspot.com mengatakan...

Komentar ini telah dihapus oleh penulis.
vegazjutek mengatakan...

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

thks ea...


4 Juni 2011 20.34
gallerys orient mengatakan...

thaks gan.. Langsung Copy Paste


8 Juni 2011 12.24
dewi mengatakan...

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


11 Juni 2011 21.24
Reisky Goo mengatakan...

dewa


29 Juni 2011 11.14
BLOG KITA BERSAMA mengatakan...

copy tuh kode abis kode apa ?


7 Juli 2011 14.21
CTR_YoskaEver_Th mengatakan...

kalo Mau Ganti Warna Nya Gmn ?


7 Juli 2011 15.05
Egi R. Ardiyanto (Supernova) mengatakan...

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

pemula nih


8 Juli 2011 20.37
patrick prasetyo mengatakan...

Komentar ini telah dihapus oleh penulis.
patrick prasetyo mengatakan...

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


27 Juli 2011 20.36
ghifarli mengatakan...

thank gw ini pencipta cheat E991/Toyibg cheat

gw terma kasih atas pelajaran yg dikasiih


15 September 2011 07.40
muhmmad_zulfkor mengatakan...

makasih


15 September 2011 23.45
Opick mengatakan...

okeh,,thanks..


20 September 2011 10.03
joykamaru mengatakan...

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

tapi kalau umpama bentuknya tu ga linkatan gmn gan


25 September 2011 11.53
Bagi Para Pencinta Naruto Sejati mengatakan...

makasih banget atas petunjuknya..


15 Oktober 2011 13.25
LoMo TiNJaK mengatakan...

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


22 Oktober 2011 16.53
Santy wiejayanti mengatakan...

kalo bacaannya bisa diganti" gak??


2 November 2011 18.49
Izya Gokil mengatakan...

Di mana kita masuk kan kode nya Gan


5 Januari 2012 11.42
shofwan jaharulfalah mengatakan...

MAKASIH BRO


30 Januari 2012 19.34
alirohmat mengatakan...

SIIP MAS BRO


13 Februari 2012 17.03
alirohmat mengatakan...

SIIP MAS BRO


13 Februari 2012 17.04
Rednockp mengatakan...

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


14 Februari 2012 05.39
yulina wati mengatakan...

Komentar ini telah dihapus oleh penulis.
yulina wati mengatakan...

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


26 September 2012 21.56
dinoo mengatakan...

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

choirul zhein mengatakan...

THANKS


28 September 2012 17.11
Erma wati mengatakan...

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


28 September 2012 20.40
dinoo mengatakan...

sama2 mas, mbak

Muhammad Iqbal mengatakan...

thx ya


3 Oktober 2012 19.29
Thezhar Febrian mengatakan...

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


7 Oktober 2012 15.39
al rizky ilham mengatakan...

mantab bro!!


24 Oktober 2012 20.12
SMANJA_SCHOOL mengatakan...

TERIMAKASIH ATAS INFONYA


7 November 2012 17.03
Group diskusi XI IPA 6 kelompok 4 mengatakan...

makasii sudah membantu..


8 November 2012 17.41
Ulfa dwi mengatakan...

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


20 November 2012 16.31
vindy Herawan mengatakan...

code2 buat ganti warna gmn??


22 November 2012 15.54
rival muhammad wildan mengatakan...

gak bisa gan


23 Desember 2012 09.19
Wimby D Black DvL mengatakan...

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


8 Januari 2013 13.27
christian ary mengatakan...

Kalo bikin warna lain kodenya apa?


24 Februari 2013 11.22
Muhammad Arbi mengatakan...

oke boss

sangat menarik

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


3 Maret 2013 22.43
Anonim mengatakan...

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


16 Maret 2013 09.47
Anonim mengatakan...

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


18 Maret 2013 10.12
Anonim mengatakan...

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


19 Maret 2013 17.15
Anonim mengatakan...

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


20 Maret 2013 01.30
Anonim mengatakan...

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


Mу blog; Buy Ice Cream Maker


20 Maret 2013 02.10
Anonim mengatakan...

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


21 Maret 2013 01.49
Anonim mengatakan...

Α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


23 Maret 2013 15.47
Anonim mengatakan...

Н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


1 April 2013 11.17
Anonim mengatakan...

Ηey very intereѕting blog!

my pаge :: Best Bread Maker To Buy


2 April 2013 03.46
Anonim mengatakan...

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


2 April 2013 17.54
Anonim mengatakan...

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


2 April 2013 17.54
Anonim mengatakan...

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


3 April 2013 15.06
Anonim mengatakan...

Н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


3 April 2013 15.22
Anonim mengatakan...

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


3 April 2013 15.23
Anonim mengatakan...

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


7 April 2013 11.19
Anonim mengatakan...

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


7 April 2013 11.19
Anonim mengatakan...

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


7 April 2013 11.19

Poskan Komentar

komentar disini

 

Stats

© 2010 DINOO BLOG All Rights Reserved Thesis WordPress Theme Converted into Blogger Template by Hack Tutors.info

Related Posts Plugin for WordPress, Blogger...