Publicentral.com - alta en buscadores, registro buscadores, promocionaPromocion en buscadores y negocios online
Mostrando Codigo - Javascript
Code

Javascript - Efecto - Fuego artifical de un texto

Códigos Javascript

El efecto muestra algo parecido a fuegos artificiales pero con el uso de un texto. Debemos modificar en las ultimas lineas initTrailer("Tutores.org con el texto que deseemos mostrar Basta con hacer click en la pantalla para ejecutar el ejemplo
Visitas: 21,780 - 15/12/2003 0:35:30
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1.  <HEAD>
  2.   <script LANGUAGE="JavaScript">
  3.   var sourisX, sourisY;
  4. var flag = 0;
  5. var posX = new Array();
  6. var posY = new Array();
  7. var isNetscape4 = (document.layers) ? true : false;
  8. var isNetscape6 = !document.all && document.getElementById;
  9. var isNetscape = isNetscape4 || isNetscape6;
  10.  
  11. var nb_point;
  12. var hauteur = new Array();
  13. var largeur = new Array();
  14. var sens = new Array();
  15. var nb_fois;
  16. var compteur;
  17. var origineY;
  18. function initTrailer(caractere,police,taille,nombre,duree) {
  19.   nb_point = nombre;
  20.   nb_fois = duree/20;
  21. document.write("<style type=text/css>");
  22.   document.write(".styleTrailer {VISIBILITY: hidden;");
  23.   document.write("FONT-SIZE: "+taille+"px;");
  24.   document.write("FONT-FAMILY: "+police+"; POSITION: absolute;}");
  25.   document.write("</style>");
  26. for (i=0; i<nb_point; i++) {
  27.     document.write("<SPAN ID='calque"+i+"' CLASS='styleTrailer'>");
  28.     document.write(caractere+"</SPAN>")
  29.   }
  30. if (isNetscape6)
  31.     document.addEventListener("mousedown",gestionSouris,true);
  32.   else {
  33.     if (isNetscape4)
  34.       document.captureEvents(Event.CLICK);
  35.     document.onmousedown = gestionSouris;
  36.   }
  37.   animationTrailer();
  38. }
  39. function gestionSouris(evenement) {
  40.   if (isNetscape) {
  41.     sourisX = evenement.pageX;
  42.     sourisY = evenement.pageY;
  43.   }
  44.   else {
  45.     sourisX = event.clientX + document.body.scrollLeft;
  46.     sourisY = event.clientY + document.body.scrollTop;
  47.   }
  48. if (flag == 0) {
  49.     for (i=0; i<nb_point; i++) {
  50.       couleur = "#"+((Math.random()>.5) ? "FF" : "80")
  51.       couleur += ((Math.random()>.5) ? "FF" : "80");
  52.       couleur += ((Math.random()>.5) ? "FF" : "80");
  53.       if (isNetscape4)
  54.         eval('document.layers["calque'+i+'"].color = "'+couleur+'";');
  55.       else if (isNetscape6)
  56.         eval('document.getElementById("calque'+i+'").style.color = "'+couleur+'";');
  57.       else
  58.         eval('document.all.calque'+i+'.style.color = "'+couleur+'";');
  59. sens[i] = (Math.random()>.5) ? -1 : 1;
  60.       largeur[i] = Math.random()*1.5;
  61.       hauteur[i] = Math.random()*2+1;
  62. posX[i] = sourisX;
  63.       posY[i] = sourisY;
  64.       visibilidad("calque"+i,true);
  65.     }
  66.     compteur = nb_fois;
  67.     origineY = sourisY;
  68.     flag = 1;
  69.   }
  70. }
  71. function animationTrailer() {
  72.   if (flag == 1) {
  73.     for (i=0; i<nb_point; i++) {
  74.       posX[i] = posX[i] + sens[i]*largeur[i];
  75.       posY[i] = origineY + hauteur[i]*((nb_fois-compteur-30)*(nb_fois-compteur-30)/30-30);
  76.     }
  77.     compteur--;
  78.  for (i=0; i<nb_point; i++) {
  79.       if (isNetscape4) {
  80.         var calque = eval("document.calque"+i);
  81.         calque.left = posX[i];
  82.         calque.top = posY[i];
  83.       }
  84.       else if (isNetscape6) {
  85.         var calque = eval("document.getElementById('calque"+i+"').style");
  86.         calque.left = posX[i];
  87.         calque.top = posY[i];
  88.       }
  89.       else {
  90.         var calque = eval("calque"+(i)+".style");
  91.         calque.posLeft = posX[i];
  92.         calque.posTop = posY[i];
  93.       }
  94.     }
  95. if (compteur == 0) {
  96.       for (i=0; i<nb_point; i++)
  97.         visibilidad("calque"+i,false);
  98.       flag = 0;
  99.     }
  100.   }
  101.  
  102.   setTimeout("animationTrailer()",20);
  103. }
  104. function visibilidad(calque,etat) {
  105.   if (etat == false)
  106.     etat = (isNetscape4) ? "hide" : "hidden";
  107.   else
  108.     etat = "visible";
  109.   if (isNetscape4)
  110.     eval('document.layers["'+calque+'"].visibility = "'+etat+'";');
  111.   else if (isNetscape6)
  112.     eval('document.getElementById("'+calque+'").style.visibility = "'+etat+'";');
  113.   else
  114.     eval('document.all.'+calque+'.style.visibility = "'+etat+'";');
  115. }
  116. </script>
  117.   </HEAD>
  118. <script LANGUAGE=JavaScript>
  119.     </script>
  120.   </HEAD>
  121. <BODY BGCOLOR="#ffffff">
  122.   <Font size=3, color='White'>Haz click para ejecutar el script</font>
  123.     <script LANGUAGE=JavaScript>{
  124.       initTrailer("Tutores.org", "Arial", 25, 20, 1900);
  125.       }
  126.     </script>
  127.   </BODY>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Efecto - Fuego artifical de un texto" href="http://www.tutores.org/codigo/896/" target="_blank">Efecto - Fuego artifical de un texto</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Aun no existe ningun comentario para este Codigo.
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad


Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado

Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.