Cara Membuat Teks Bergerak Mengikuti Arah Kursor | Text Trail
Rabu, Desember 01, 2010
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?
Tags: Blogging
Langganan:
Poskan Komentar (Atom)
Share your views...
58 Respones to "Cara Membuat Teks Bergerak Mengikuti Arah Kursor | Text Trail"
Kalo cara bikin emoticon buat kolom comment yang lucu gimana ya??? :51:
11 Januari 2011 09.10
GAN THANKS YAA ILMUNYA
12 April 2011 22.34
Kereeeennnn....
Ternyata Cepet Bged Bkinya....
thks ea...
4 Juni 2011 20.34
thaks gan.. Langsung Copy Paste
8 Juni 2011 12.24
makasih untuk informasion please visit to my blog... cz Q pemula
11 Juni 2011 21.24
dewa
29 Juni 2011 11.14
copy tuh kode abis kode apa ?
7 Juli 2011 14.21
kalo Mau Ganti Warna Nya Gmn ?
7 Juli 2011 15.05
thx info nya gan
follow blog ane ya
http://supernova-holmes.blogspot.com/
hehe...
pemula nih
8 Juli 2011 20.37
Makasih ya buat tipsnya buat blog follow to my blog ya inhttp;//patrick-prasetyo.blogspot.com
27 Juli 2011 20.36
thank gw ini pencipta cheat E991/Toyibg cheat
gw terma kasih atas pelajaran yg dikasiih
15 September 2011 07.40
makasih
15 September 2011 23.45
okeh,,thanks..
20 September 2011 10.03
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
makasih banget atas petunjuknya..
15 Oktober 2011 13.25
makasi bos atas pemberitauan nya bos.,.,.
mantabh deh turotorialnya bos
22 Oktober 2011 16.53
kalo bacaannya bisa diganti" gak??
2 November 2011 18.49
Di mana kita masuk kan kode nya Gan
5 Januari 2012 11.42
MAKASIH BRO
30 Januari 2012 19.34
SIIP MAS BRO
13 Februari 2012 17.03
SIIP MAS BRO
13 Februari 2012 17.04
Terima kasih ya bro
blog gue jadi keren gini nih
http://www.jsssintang.blogspot.com
kunjung2 ya
14 Februari 2012 05.39
kodenya di masukin semuanya ato gmna sichh,, ku lom ngerti. tlong jasi donk plissss..
26 September 2012 21.56
iya, kodenya dimasukin semua, langsung masukin ke elemen laman, wah maaf untuk komentar2 yang sebelumnya belum sempat bls kemarin, terima kasih sudah berkinjung "d
THANKS
28 September 2012 17.11
makasih informasinya, jangan lupa kunjungi blog ane di http://ermawatisweet.blogspot.com
28 September 2012 20.40
sama2 mas, mbak
thx ya
3 Oktober 2012 19.29
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
mantab bro!!
24 Oktober 2012 20.12
TERIMAKASIH ATAS INFONYA
7 November 2012 17.03
makasii sudah membantu..
8 November 2012 17.41
thanks for your information ! visit bro, sist and give your opinion
http://ulfalullaby.blogspot.com/
20 November 2012 16.31
code2 buat ganti warna gmn??
22 November 2012 15.54
gak bisa gan
23 Desember 2012 09.19
Thx y kk ^^
Aku Berhasil (y)
Lanjutkan!
I LIKE IT
8 Januari 2013 13.27
Kalo bikin warna lain kodenya apa?
24 Februari 2013 11.22
oke boss
sangat menarik
kunjungan baliknya ya gan http://arbyoceano.blogspot.com/
3 Maret 2013 22.43
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
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
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
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
Yeѕ! Finally something аbout the art of shаving;.
Mу blog; Buy Ice Cream Maker
20 Maret 2013 02.10
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
Α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
Н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
Ηey very intereѕting blog!
my pаge :: Best Bread Maker To Buy
2 April 2013 03.46
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
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
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
Н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
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
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
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
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