animasi kursor pada blog
DESCRIPTION
internetTRANSCRIPT
ome → Tip Blogspot → Menampilkan Kursor Animasi pada Blog
Menampilkan Kursor Animasi pada Blog
Skrip populer kali ini mengenai cara menampilkan kursor animasi di blog.
Dengan skrip ini sobat dapat mengganti kursor default menjadi kursor
sendiri, yaitu berupa gambar unik atau dengan tambahan objek yang
mengikuti pointer mouse. Objek di sekitar pointer mouse tersebut dapat
berupa tulisan atau gambar kecil yang umumnya disimpan dalam format
file .PNG, .GIF, .ANI, dan .CUR.
Jika format file adalah .GIF, .ANI, dan .CUR, maka gambar kursor dapat
dibuat animasi bergerak, tetapi jika gambar kursor dalam format file .PNG
atau format lain tanpa animasi gerak, maka dengan bantuan program
JavaScript dapat dibuat animasi kursor yang mengikuti pointer mouse.
Di bawah ini saya share tiga cara untuk menampilkan kursor animasi pada
blog berupa kursor animasi bintang berjatuhan, tulisan berputar pada kursor,
gambar mengikuti pointer mouse, teks berputar mengelilingi pointer mouse,
dan mengganti kursor dengan gambar sendir.
Animasi Kursor Bintang Berjatuhan
Skrip ini berfungsi untuk menampilkan animasi bintang berjatuhan ketika
mouse digerakan, Caranya sebagai berikut:
1. Login ke Blogger.
2. Masuk ke halaman "Layout" atau Tata Letak.
3. Add Gadget (Tambah Gadget) kemudian pilih HTML/JavaScript.
4. Salin kode berikut dan simpan di jendela tersebut tanpa perlu diberi
judul, kemudian simpan.
5. <script type='text/javascript'>
6. // <![CDATA[
7. var colour="#52D8ED";
8. var sparkles=100;
9. var x=ox=400;
10. var y=oy=300;
11. var swide=800;
12. var shigh=600;
13. var sleft=sdown=0;
14. var tiny=new Array();
15. var star=new Array();
16. var starv=new Array();
17. var starx=new Array();
18. var stary=new Array();
19. var tinyx=new Array();
20. var tinyy=new Array();
21. var tinyv=new Array();
22. window.onload=function() { if (document.getElementById) {
23. var i, rats, rlef, rdow;
24. for (var i=0; i<sparkles; i++) {
25. var rats=createDiv(3, 3);
26. rats.style.visibility="hidden";
27. document.body.appendChild(tiny[i]=rats);
28. starv[i]=0;
29. tinyv[i]=0;
30. var rats=createDiv(5, 5);
31. rats.style.backgroundColor="transparent";
32. rats.style.visibility="hidden";
33. var rlef=createDiv(1, 5);
34. var rdow=createDiv(5, 1);
35. rats.appendChild(rlef);
36. rats.appendChild(rdow);
37. rlef.style.top="3px";
38. rlef.style.left="0px";
39. rdow.style.top="0px";
40. rdow.style.left="3px";
41. document.body.appendChild(star[i]=rats);
42. }
43. set_width();
44. sparkle();
45. }}
46. function sparkle() {
47. var c;
48. if (x!=ox || y!=oy) {
49. ox=x;
50. oy=y;
51. for (c=0; c<sparkles; c++) if (!starv[c]) {
52. star[c].style.left=(starx[c]=x)+"px";
53. star[c].style.top=(stary[c]=y)+"px";
54. star[c].style.clip="rect(0px, 5px, 5px, 0px)";
55. star[c].style.visibility="visible";
56. starv[c]=50;
57. break;
58. }
59. }
60. for (c=0; c<sparkles; c++) {
61. if (starv[c]) update_star(c);
62. if (tinyv[c]) update_tiny(c);
63. }
64. setTimeout("sparkle()", 40);
65. }
66. function update_star(i) {
67. if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
68. if (starv[i]) {
69. stary[i]+=1+Math.random()*3;
70. if (stary[i]<shigh+sdown) {
71. star[i].style.top=stary[i]+"px";
72. starx[i]+=(i%5-2)/5;
73. star[i].style.left=starx[i]+"px";
74. }
75. else {
76. star[i].style.visibility="hidden";
77. starv[i]=0;
78. return;
79. }
80. }
81. else {
82. tinyv[i]=50;
83. tiny[i].style.top=(tinyy[i]=stary[i])+"px";
84. tiny[i].style.left=(tinyx[i]=starx[i])+"px";
85. tiny[i].style.width="2px";
86. tiny[i].style.height="2px";
87. star[i].style.visibility="hidden";
88. tiny[i].style.visibility="visible"
89. }
90. }
91. function update_tiny(i) {
92. if (--tinyv[i]==25) {
93. tiny[i].style.width="1px";
94. tiny[i].style.height="1px";
95. }
96. if (tinyv[i]) {
97. tinyy[i]+=1+Math.random()*3;
98. if (tinyy[i]<shigh+sdown) {
99. tiny[i].style.top=tinyy[i]+"px";
100. tinyx[i]+=(i%5-2)/5;
101. tiny[i].style.left=tinyx[i]+"px";
102. }
103. else {
104. tiny[i].style.visibility="hidden";
105. tinyv[i]=0;
106. return;
107. }
108. }
109. else tiny[i].style.visibility="hidden";
110. }
111. document.onmousemove=mouse;
112. function mouse(e) {
113. set_scroll();
114. y=(e)?e.pageY:event.y+sdown;
115. x=(e)?e.pageX:event.x+sleft;
116. }
117. function set_scroll() {
118. if (typeof(self.pageYOffset)=="number") {
119. sdown=self.pageYOffset;
120. sleft=self.pageXOffset;
121. }
122. else if (document.body.scrollTop || document.body.scrollLeft) {
123. sdown=document.body.scrollTop;
124. sleft=document.body.scrollLeft;
125. }
126. else if (document.documentElement && (document.documentElement.scrollTop ||
document.documentElement.scrollLeft)) {
127. sleft=document.documentElement.scrollLeft;
128. sdown=document.documentElement.scrollTop;
129. }
130. else {
131. sdown=0;
132. sleft=0;
133. }
134. }
135. window.onresize=set_width;
136. function set_width() {
137. if (typeof(self.innerWidth)=="number") {
138. swide=self.innerWidth;
139. shigh=self.innerHeight;
140. }
141. else if (document.documentElement && document.documentElement.clientWidth) {
142. swide=document.documentElement.clientWidth;
143. shigh=document.documentElement.clientHeight;
144. }
145. else if (document.body.clientWidth) {
146. swide=document.body.clientWidth;
147. shigh=document.body.clientHeight;
148. }
149. }
150. function createDiv(height, width) {
151. var div=document.createElement("div");
152. div.style.position="absolute";
153. div.style.height=height+"px";
154. div.style.width=width+"px";
155. div.style.overflow="hidden";
156. div.style.backgroundColor=colour;
157. return (div);
158. }
159. // ]]>
</script>
Sumber skrip: Blogger Peer
Gambar Animasi Mengikuti Mouse
Skrip ini akan menampilkan mouse yang selalu diikuti gambar animasi
seperti per bergoyang dan selalu berat ke bawah, sehingga apabila mouse
diam (kursor tidak bergerak), gambar animasi kursor pun akan diam seolah
ada gravitasi ke bawah. Caranya pasangnya sebagai berikut:
1. Login ke Blogger.
2. Masuk ke halaman "Layout" atau Tata Letak.
3. Add Gadget (Tambah Gadget) kemudian pilih HTML/JavaScript.
4. Salin kode berikut dan simpan di jendela tersebut tanpa perlu diberi
judul, kemudian simpan.
5. <style>.dot{position:fixed; padding:0;margin:0;border:0 solid;border-
radius:6px;box-shadow:0 0 0 #fff;z-index:10;}
6. #dot0{visibility: hidden;}</style>
7. <script type="text/javascript">
8. //<![CDATA[
9. function elastic_trail() {
10. var f = 8; /* Jumlah Kursor */
11. var g = "http://i48.tinypic.com/s48bvd.jpg"; /* Gambar Kursor */
12. var h = 0.01;
13. var k = 20; /* Jarak */
14. var l = 10;
15. var m = 1;
16. var o = 0;
17. var p = 50;
18. var q = 10;
19. var r = 0.1;
20. var s = 0.1;
21. var t = 12; /* Ukuran kursor */
22. var u = 0.75;
23. var v = 0;
24. var w = 0;
25. for (var i = f - 1; i > -1; --i) {
26. with(document) {
27. write('<div class="dot" id="dot' + i + '">\n');
28. write('<img src="' + g + '" height="' + t + '" width="' + t + '" alt="">\n');
29. write("</div>\n")
30. }
31. }
32. /*@cc_on@*/
33. /*@if(@_jscript_version>=5)if(navigator.appVersion.replace(/^.*MSIE (\
d+).*$/,'$1')<=6){var x=function(a,n){var
b='scroll'+a,d=document,c='compatMode';return d[c]&&d[c]=='CSS1Compat'?
d.documentElement[b]+n+'px':d.body[b]+n+'px'};document.write('<style
type="text/css">.dot {position: absolute;}body {background: url(foo)
fixed;}<\/style>')};@end@*/
34. var y = function () {
35. return (document.compatMode && document.compatMode.indexOf("CSS") != -1) ?
document.documentElement: document.body
36. };
37. var z = document.layers ? "": "px";
38. elastic_trail.prototype.dot = function (i) {
39. this.X = v;
40. this.Y = w;
41. this.dx = 0;
42. this.dy = 0;
43. if (document.layers) {
44. this.obj = document["dot" + i]
45. } else {
46. if (document.all) {
47. this.obj = document.all["dot" + i].style
48. } else {
49. if (document.getElementById) {
50. this.obj = document.getElementById("dot" + i).style
51. } else {
52. return
53. }
54. }
55. }
56. };
57. var A = new Array();
58. for (var i = 0; i < f; i++) {
59. A[i] = new this.dot(i)
60. }
61. for (i = 0; i < f; i++) {
62. A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) :
Math.round(A[i].X) + z;
63. A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
64. }
65. var B = this;
66. setInterval(function () {
67. B.animate()
68. },
69. 20);
70. function MoveHandler(e) {
71. v = e.pageX - pageXOffset;
72. w = e.pageY - pageYOffset;
73. return true
74. }
75. function MoveHandlerIE() {
76. v = window.event.x;
77. w = window.event.y
78. }
79. if (document.addEventListener) {
80. document.addEventListener("mousemove", MoveHandler, false)
81. } else {
82. if (document.attachEvent) {
83. document.attachEvent("onmousemove", MoveHandlerIE)
84. } else {
85. if (document.captureEvents) {
86. document.captureEvents(Event.MOUSEMOVE);
87. document.onmousemove = MoveHandler
88. }
89. }
90. }
91. elastic_trail.prototype.vec = function (X, Y) {
92. this.X = X;
93. this.Y = Y
94. };
95. elastic_trail.prototype.springForce = function (i, j, a) {
96. var b = (A[i].X - A[j].X);
97. var c = (A[i].Y - A[j].Y);
98. var d = Math.sqrt(b * b + c * c);
99. if (d > k) {
100. var e = l * (d - k);
101. a.X += (b / d) * e;
102. a.Y += (c / d) * e
103. }
104. };
105. elastic_trail.prototype.animate = function () {
106. var a = 0;
107. A[0].X = v;
108. A[0].Y = w;
109. a = 1;
110. for (var i = a; i < f; i++) {
111. var b = new this.vec(0, 0);
112. if (i > 0) {
113. this.springForce(i - 1, i, b)
114. }
115. if (i < (f - 1)) {
116. this.springForce(i + 1, i, b)
117. }
118. var c = new this.vec( - A[i].dx * q, -A[i].dy * q);
119. var d = new this.vec((b.X + c.X) / m + o, (b.Y + c.Y) / m + p);
120. A[i].dx += (h * d.X);
121. A[i].dy += (h * d.Y);
122. if (Math.abs(A[i].dx) < r && Math.abs(A[i].dy) < r && Math.abs(d.X) < s &&
Math.abs(d.Y) < s) {
123. A[i].dx = 0;
124. A[i].dy = 0
125. }
126. A[i].X += A[i].dx;
127. A[i].Y += A[i].dy;
128. var e, width;
129. if (window.innerWidth) {
130. e = window.innerHeight;
131. width = y().clientWidth && window.innerWidth - y().clientWidth == 17 ||
window.innerWidth - y().clientWidth == 15 ? y().clientWidth: window.innerWidth
132. } else {
133. e = y().clientHeight - Math.ceil(t / 2);
134. width = y().clientWidth
135. }
136. if (A[i].Y >= e - t - 1) {
137. if (A[i].dy > 0) {
138. A[i].dy = u * -A[i].dy
139. }
140. A[i].Y = e - t - 1
141. }
142. if (A[i].X >= width - t) {
143. if (A[i].dx > 0) {
144. A[i].dx = u * -A[i].dx
145. }
146. A[i].X = width - t - 1
147. }
148. if (A[i].X < 0) {
149. if (A[i].dx < 0) {
150. A[i].dx = u * -A[i].dx
151. }
152. A[i].X = 0
153. }
154. A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) :
Math.round(A[i].X) + z;
155. A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
156. }
157. }
158. }
159. new elastic_trail();
160. //]]>
</script>
Sumber:www.cyiberart.com
161. Jika sobat ingin mengganti gambar, ganti kode berwarna
merahhttp://i48.tinypic.com/s48bvd.jpg dengan URL gambar sendiri
atau dapat dengan salah satu URL gambar kursor animasi di bawah:
Gambar kursor kupu-kupu: http://i48.tinypic.com/s48bvd.jpg
Gambar kursor bola: http://i48.tinypic.com/mwbl29.jpg
Gambar kursor hati: http://i48.tinypic.com/25ix5rd.jpg
Gambar kursor bintang: http://i48.tinypic.com/eamrur.jpg
Gambar kursor bola api:http://i48.tinypic.com/2cf9htc.jpg
Gambar kursor matahari: http://i48.tinypic.com/281pi1.jpg
Gambar kursor burung terbang: http://i49.tinypic.com/347hd05.jpg
Gambar kursor lonceng:http://i48.tinypic.com/1g0lqx.jpg
Gambar kursor bunga: http://i48.tinypic.com/9u12ya.jpg
Tulisan Mengelelilingi Kursor | Teks Berputar Mengikuti Mouse
Skrip ini akan mengubah kursor menjadi kursor animasi yang dikelilingi
tulisan berputar. Cara pasangnya sebagai berikut:
1. Login ke Blogger.
2. Masuk ke halaman "Layout" atau Tata Letak.
3. Add Gadget (Tambah Gadget) kemudian pilih HTML/JavaScript.
4. Salin kode berikut dan simpan di jendela tersebut tanpa perlu diberi
judul, kemudian simpan.
5. <style type="text/css">
6. #outerCircleText {
7. font-weight: bold;
8. color: #ff0000;
9. position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
10. #outerCircleText div {position: relative;}
11. #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
12. </style>
13. <script type="text/javascript">
14. ;(function(){
15. var msg = "www.LinkSukses.com";
16. var size = 24;
17. var circleY = 0.75; var circleX = 2;
18. var letter_spacing = 5;
19. var diameter = 10;
20. var rotation = 0.4;
21. var speed = 0.3;
22. if (!window.addEventListener && !window.attachEvent || !document.createElement)
return;
23. msg = msg.split('');
24. var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep =
20,
25. ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X
= [],
26. o = document.createElement('div'), oi = document.createElement('div'),
27. b = document.compatMode && document.compatMode != "BackCompat"?
document.documentElement : document.body,
28. mouse = function(e){
29. e = e || window.event;
30. ymouse = !isNaN(e.pageY)? e.pageY : e.clientY;
31. xmouse = !isNaN(e.pageX)? e.pageX : e.clientX;
32. },
33. makecircle = function(){
34. if(init.nopy){
35. o.style.top = (b || document.body).scrollTop + 'px';
36. o.style.left = (b || document.body).scrollLeft + 'px';
37. };
38. currStep -= rotation;
39. for (var d, i = n; i > -1; --i){
40. d = document.getElementById('iemsg' + i).style;
41. d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) *
circleY - 15) + 'px';
42. d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) *
circleX) + 'px';
43. };
44. },
45. drag = function(){
46. y[0] = Y[0] += (ymouse - Y[0]) * speed;
47. x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
48. for (var i = n; i > 0; --i){
49. y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
50. x[i] = X[i] += (x[i-1] - X[i]) * speed;
51. };
52. makecircle();
53. },
54. init = function(){
55. if(!isNaN(window.pageYOffset)){
56. ymouse += window.pageYOffset;
57. xmouse += window.pageXOffset;
58. } else init.nopy = true;
59. for (var d, i = n; i > -1; --i){
60. d = document.createElement('div'); d.id = 'iemsg' + i;
61. d.style.height = d.style.width = a + 'px';
62. d.appendChild(document.createTextNode(msg[i]));
63. oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
64. };
65. o.appendChild(oi); document.body.appendChild(o);
66. setInterval(drag, 25);
67. },
68. ascroll = function(){
69. ymouse += window.pageYOffset;
70. xmouse += window.pageXOffset;
71. window.removeEventListener('scroll', ascroll, false);
72. };
73. o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
74. if (window.addEventListener){
75. window.addEventListener('load', init, false);
76. document.addEventListener('mouseover', mouse, false);
77. document.addEventListener('mousemove', mouse, false);
78. if (/Apple/.test(navigator.vendor))
79. window.addEventListener('scroll', ascroll, false);
80. }
81. else if (window.attachEvent){
82. window.attachEvent('onload', init);
83. document.attachEvent('onmousemove', mouse);
84. };
85. })();
86. </script>
Sumber skrip: Dynamic Drive
Mengubah Gambar Kursor
Kode di bawah adalah kode CSS dan HTML untuk memanggil gambar kursor
animasi. Dengan kode tersebut tampilan pointer mouse (gambar kursor) di
blog akan seperti gambar-gambar kursor animasi di bawah. Cara mengganti
kursor tersebut adalah sebagai berikut:
1. Login ke Blogger.
2. Masuk ke halaman "Layout" (Tata Letak).
3. Add Gadget atau Tambah Gadget kemudian pilih HTML/JavaScript.
4. Copy paste kode di bawah, simpan (Save) dan lihat hasilnya.
<style> body, a, a:hover { cursor:url('URL Gambar Mouse'), auto }</style>
5. Ganti kode berwarna merah URL Gambar Mouse dengan salah satu
URL di bawah sesuai dengan Model yang dinginkan atau dengan
gambar animasi mouse sendiri.
o Animasi kursor Model-1: http://ani.cursors-4u.net/cursors/cur-
11/cur1066.png
o Animasi kursor Model-2: http://cur.cursors-4u.net/cursors/cur-
11/cur1027.png
o Animasi kursor Model-
3: http://cur.cursors-4u.net/holidays/hol-6/hol512.png
o Animasi kursor Model-4: http://cur.cursors-4u.net/cursors/cur-
10/cur935.gif
o Animasi kursor Model-5: http://cur.cursors-4u.net/symbols/sym-
7/sym646.gif
Sumber gambar kursor animasi: www.cursors-4u.comKursor.jpg
at 2:09 AM