Con el siguiente código se puede añadir al cursor un rastro de texto, al texto se le puede modificar el color, la fuente, tamaño y velocidad, las indicaciones para las modificaciones están dentro del código.

El código se tiene que colocar después de la etiqueta <head>. (No olvidar hacer un respaldo de la plantilla).

COPIA EL CÓDIGO
JavaScript:
  1. <!-- ONE STEP TO INSTALL RIPPLE TEXT: 1. Copy the coding into the HEAD of your HTML document -->
  2.  
  3. <!-- STEP ONE: PEGAR EL CODIGO DEBAJO DE LA ETIQUETA <head> en tu documentos html (Plantilla) -->
  4. <script language="JavaScript">
  5. <!-- The JavaScript Source!! http://javascript.internet.com -->
  6. <!-- Ripple Text by kurt.grigg@virgin.net -->
  7.  
  8. <!-- Begin
  9. //Aqui se escribe el texto que va a seguir al mouse
  10. msg='Escribir texto aquí!';
  11. //Aqui se especifica la fuente del texto
  12. font='Verdana,Arial';
  13. size=2; // // solo valores entre 1 y 7!!
  14. //Aqui el color
  15. color='#0000ff';
  16. //Aqui la velocidad
  17. speed=0.5;
  18.  
  19. //A partir de aqui no alterar nada!!
  20. ns=(document.layers);
  21. ie=(document.all);
  22. msg=msg.split('');
  23. n=msg.length;
  24. a=size*10;
  25. ymouse=0;
  26. xmouse=0;
  27. scrll=0;
  28. props="<font face="+font+" size="+size+" color="+color+">";
  29. if (ns){
  30. for (i=0; i <n; i++)
  31. document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
  32. }
  33. if (ie){
  34. document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
  35. for (i=0; i <n; i++)
  36. document.write('<div id="iemsg" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+msg[i]+'</font></div>');
  37. document.write('</div></div>');
  38. }
  39. (ns)?window.captureEvents(Event.MOUSEMOVE):0;
  40. function Mouse(evnt){
  41. ymouse = (ns)?evnt.pageY+20-(window.pageYOffset):event.y+20;
  42. xmouse = (ns)?evnt.pageX+20:event.x+20;
  43. }
  44. (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
  45. y=new Array();
  46. x=new Array();
  47. Y=new Array();
  48. X=new Array();
  49. for (i=0; i <n; i++){
  50. y[i]=0;
  51. x[i]=0;
  52. Y[i]=0;
  53. X[i]=0;
  54. }
  55. function assign(){
  56. if (ie) outer.style.top=document.body.scrollTop;
  57. for (i=0; i <n; i++){
  58. var d=(ns)?document.layers['nsmsg'+i]:iemsg[i].style;
  59. d.top=y[i]+scrll;
  60. d.left=x[i]+(i*(a/2));
  61. }
  62. }
  63. function ripple(){
  64. scrll=(ns)?window.pageYOffset:0;
  65. y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
  66. x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
  67. for (var i=1; i <n; i++){
  68. y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
  69. x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
  70. }
  71. assign();
  72. setTimeout('ripple()',10);
  73. }
  74. if (ns||ie)window.onload=ripple;
  75. // End -->
  76. </script>

Este efecto funciona con Internet Explorer, ejemplo.


Si este Post te ayudó recuerda votar por el blog En esta Página
votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 votes, average: 0 out of 10 (0 votos, promedio: 0 de 10)
Loading ... Loading ...

Post Relacionados
Rastro de Imagenes en el Cursor">Rastro de Imagenes en el Cursor
Como agregar una Imagen en el Titulo, Parte I, Son of Moto">Como agregar una Imagen en el Titulo, Parte I, Son of Moto
Cambiar el Cursor">Cambiar el Cursor
Atajos del teclado">Atajos del teclado
Como agregar Una Anotacion">Como agregar Una Anotacion


Post al Azar:




Blogalaxia Tags:

Imprime este Post Imprime este Post
Envía este Post Envía este Post