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>
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;borderradius: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. 27. 28. 29. 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 () { with(document) { write('<div class="dot" id="dot' + i + '">\n'); write('<img src="' + g + '" height="' + t + '" width="' + t + '" alt="">\n'); write("</div>\n")
35.
36. }; 37. var z = document.layers ? "": "px"; 38. elastic_trail.prototype.dot = function (i) { 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. } } } this.X = v; this.Y = w; this.dx = 0; this.dy = 0; if (document.layers) { this.obj = document["dot" + i] } else { if (document.all) { this.obj = document.all["dot" + i].style } else { if (document.getElementById) { this.obj = document.getElementById("dot" + i).style } else { return
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. 63. A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z; 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. 72. 73. v = e.pageX - pageXOffset; w = e.pageY - pageYOffset; return true
78. } 79. if (document.addEventListener) { 80. 82. 83. 84. 85. 86. 87. 88. 89. } 90. } 91. elastic_trail.prototype.vec = function (X, Y) { 92. 93. this.X = X; this.Y = Y } document.addEventListener("mousemove", MoveHandler, false) if (document.attachEvent) { document.attachEvent("onmousemove", MoveHandlerIE) } else { if (document.captureEvents) { document.captureEvents(Event.MOUSEMOVE); document.onmousemove = MoveHandler 81. } else {
94. }; 95. elastic_trail.prototype.springForce = function (i, j, a) { 96. 97. 98. 99. 100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. 118. 119. 120. 121. } var c = new this.vec( - A[i].dx * q, -A[i].dy * q); var d = new this.vec((b.X + c.X) / m + o, (b.Y + c.Y) / m + p); A[i].dx += (h * d.X); A[i].dy += (h * d.Y); } if (i < (f - 1)) { this.springForce(i + 1, i, b) } }; elastic_trail.prototype.animate = function () { var a = 0; A[0].X = v; A[0].Y = w; a = 1; for (var i = a; i < f; i++) { var b = new this.vec(0, 0); if (i > 0) { this.springForce(i - 1, i, b) var b = (A[i].X - A[j].X); var c = (A[i].Y - A[j].Y); var d = Math.sqrt(b * b + c * c); if (d > k) { var e = l * (d - k); a.X += (b / d) * e; a.Y += (c / d) * e
122. 123. 124. 125. 126. 127. 128. 129. 130. 131. 132. 133. 134. 135. 136. 137. 138. 139. 140. 141. 142. 143. 144. 145. 146. 147. 148. 149. 150. 151. 152. 153. 154. 155. 156. 157. 158. } } }
if (Math.abs(A[i].dx) < r && Math.abs(A[i].dy) < r && Math.abs(d.X) < s && A[i].dx = 0; A[i].dy = 0 } A[i].X += A[i].dx; A[i].Y += A[i].dy; var e, width; if (window.innerWidth) { e = window.innerHeight; width = y().clientWidth && window.innerWidth - y().clientWidth == 17 || } else { e = y().clientHeight - Math.ceil(t / 2); width = y().clientWidth } if (A[i].Y >= e - t - 1) { if (A[i].dy > 0) { A[i].dy = u * -A[i].dy } A[i].Y = e - t - 1 } if (A[i].X >= width - t) { if (A[i].dx > 0) { A[i].dx = u * -A[i].dx } A[i].X = width - t - 1 } if (A[i].X < 0) { if (A[i].dx < 0) { A[i].dx = u * -A[i].dx } A[i].X = 0 } A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
Math.abs(d.Y) < s) {
Math.round(A[i].X) + z;
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:
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. 36.
37. }; 38. currStep -= rotation; 39. for (var d, i = n; i > -1; --i){ 40. 41. 42. 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'; 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. 50. y[i] = Y[i] += (y[i-1] - Y[i]) * speed; x[i] = X[i] += (x[i-1] - X[i]) * speed;
51. }; 52. makecircle(); 53. }, 54. init = function(){ 55. if(!isNaN(window.pageYOffset)){ 56. 57. ymouse += window.pageYOffset; xmouse += window.pageXOffset;
58. } else init.nopy = true; 59. for (var d, i = n; i > -1; --i){ 60. 61. 62. 63. 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;
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);
81. else if (window.attachEvent){ 82. window.attachEvent('onload', init); 83. document.attachEvent('onmousemove', mouse); 84. }; 85. })(); 86. </script>
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.
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.
Animasi kursor Model-1: http://ani.cursors-4u.net/cursors/cur11/cur1066.png Animasi kursor Model-2: http://cur.cursors-4u.net/cursors/cur11/cur1027.png Animasi kursor Model-3: http://cur.cursors-4u.net/holidays/hol6/hol512.png Animasi kursor Model-4: http://cur.cursors-4u.net/cursors/cur10/cur935.gif Animasi kursor Model-5: http://cur.cursors-4u.net/symbols/sym7/sym646.gif