3. [JavaScript][MEDIO] Script ''palabras que caen''
Páginas: [1]   Ir Abajo
« anterior próximo »

[JavaScript][MEDIO] Script ''palabras que caen''

  • 0 Respuestas
  • 2250 Vistas

0 Usuarios y 1 Visitante están viendo este tema.

Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5701
  • Actividad:
    100%
  • Country: ar
  • Reputación 37
  • ANTRAX
  • Skype: underc0de.org
  • Twitter: @Underc0de
    • Ver Perfil
    • Underc0de
    • Email

[JavaScript][MEDIO] Script ''palabras que caen''

  • en: Febrero 24, 2010, 11:12:26 am
Este código te permite simulando una lluvia de palabras crear un párrafo, ideal para llamar la atención con un mensaje

Código: Javascript
  1. <html>
  2.  
  3. <head>
  4. <title>Palabras que caen hasta completar un párrafo</title>
  5. <script LANGUAGE="JavaScript" FPTYPE="dynamicanimation8">
  6.  
  7.   dynamicanimAttr = "dynamicanimation8"
  8.   animateElements = new Array()
  9.   currentElement = 0
  10.   speed = 0
  11.   stepsZoom = 8
  12.   stepsWord = 8
  13.   stepsFly = 12
  14.   stepsSpiral = 16
  15.   steps = stepsZoom
  16.   step = 0
  17.   outString = ""
  18.   function dynAnimation8()
  19.   {
  20.     var ms = navigator.appVersion.indexOf("MSIE")
  21.     ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
  22.     if(!ie4)
  23.     {
  24.       if((navigator.appName == "Netscape") &&
  25.          (parseInt(navigator.appVersion.substring(0, 1)) >= 4))
  26.       {
  27.         for (index=document.layers.length-1; index >= 0; index--)
  28.         {
  29.             layer=document.layers[index]
  30.             if (layer.left==10000)
  31.                 layer.left=0
  32.         }
  33.       }
  34.       return
  35.     }
  36.     for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
  37.     {
  38.       el = document.all[index]
  39.       animation = el.getAttribute(dynamicanimAttr, false)
  40.       if(null != animation)
  41.       {
  42.         if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
  43.         {
  44.           ih = el.innerHTML
  45.           outString = ""
  46.           i1 = 0
  47.           iend = ih.length
  48.           while(true)
  49.           {
  50.             i2 = startWord(ih, i1)
  51.             if(i2 == -1)
  52.               i2 = iend
  53.             outWord(ih, i1, i2, false, "")
  54.             if(i2 == iend)
  55.               break
  56.             i1 = i2
  57.             i2 = endWord(ih, i1)
  58.             if(i2 == -1)
  59.               i2 = iend
  60.             outWord(ih, i1, i2, true, animation)
  61.             if(i2 == iend)
  62.               break
  63.             i1 = i2
  64.           }
  65.           document.all[index].innerHTML = outString
  66.           document.all[index].style.posLeft = 0
  67.           document.all[index].setAttribute(dynamicanimAttr, null)
  68.         }
  69.         if(animation == "zoomIn" || animation == "zoomOut")
  70.         {
  71.           ih = el.innerHTML
  72.           outString = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">"
  73.           outString += ih
  74.           outString += "</SPAN>"
  75.           document.all[index].innerHTML = outString
  76.           document.all[index].style.posLeft = 0
  77.           document.all[index].setAttribute(dynamicanimAttr, null)
  78.         }
  79.       }
  80.     }
  81.     i = 0
  82.     for (index=document.body.sourceIndex; index < document.all.length; index++)
  83.     {
  84.       el = document.all[index]
  85.       animation = el.getAttribute(dynamicanimAttr, false)
  86.       if (null != animation)
  87.       {
  88.         if(animation == "flyLeft")
  89.         {
  90.           el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  91.           el.style.posTop = 0
  92.         }
  93.         else if(animation == "flyRight")
  94.         {
  95.           el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
  96.           el.style.posTop = 0
  97.         }
  98.         else if(animation == "flyTop" || animation == "dropWord")
  99.         {
  100.           el.style.posLeft = 0
  101.           el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
  102.         }
  103.         else if(animation == "flyBottom")
  104.         {
  105.           el.style.posLeft = 0
  106.           el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
  107.         }
  108.         else if(animation == "flyTopLeft")
  109.         {
  110.           el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  111.           el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
  112.         }
  113.         else if(animation == "flyTopRight" || animation == "flyTopRightWord")
  114.         {
  115.           el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
  116.           el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
  117.         }
  118.         else if(animation == "flyBottomLeft")
  119.         {
  120.           el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  121.           el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
  122.         }
  123.         else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
  124.         {
  125.           el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
  126.           el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
  127.         }
  128.         else if(animation == "spiral")
  129.         {
  130.           el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  131.           el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
  132.         }
  133.         else if(animation == "zoomIn")
  134.         {
  135.           el.style.posLeft = 10000
  136.           el.style.posTop = 0
  137.         }
  138.         else if(animation == "zoomOut")
  139.         {
  140.           el.style.posLeft = 10000
  141.           el.style.posTop = 0
  142.         }
  143.         else
  144.         {
  145.           el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
  146.           el.style.posTop = 0
  147.         }
  148.         el.initLeft = el.style.posLeft
  149.         el.initTop = el.style.posTop
  150.         animateElements[i++] = el
  151.       }
  152.     }
  153.     window.setTimeout("animate();", speed)
  154.   }
  155.   function offsetLeft(el)
  156.   {
  157.     x = el.offsetLeft
  158.     for (e = el.offsetParent; e; e = e.offsetParent)
  159.       x += e.offsetLeft;
  160.     return x
  161.   }
  162.   function offsetTop(el)
  163.   {
  164.     y = el.offsetTop
  165.     for (e = el.offsetParent; e; e = e.offsetParent)
  166.       y += e.offsetTop;
  167.     return y
  168.   }
  169.   function startWord(ih, i)
  170.   {
  171.     for(tag = false; i < ih.length; i++)
  172.     {
  173.       c = ih.charAt(i)
  174.       if(c == '<')
  175.         tag = true
  176.       if(!tag)
  177.         return i
  178.       if(c == '>')
  179.         tag = false
  180.     }
  181.     return -1
  182.   }
  183.   function endWord(ih, i)
  184.   {
  185.     nonSpace = false
  186.     space = false
  187.     while(i < ih.length)
  188.     {
  189.       c = ih.charAt(i)
  190.       if(c != ' ')
  191.         nonSpace = true
  192.       if(nonSpace && c == ' ')
  193.         space = true
  194.       if(c == '<')
  195.         return i
  196.       if(space && c != ' ')
  197.         return i
  198.       i++
  199.     }
  200.     return -1
  201.   }
  202.   function outWord(ih, i1, i2, dyn, anim)
  203.   {
  204.     if(dyn)
  205.       outString += "<SPAN " + dynamicanimAttr + "=\"" + anim + "\" style=\"position: relative; left: 10000;\">"
  206.     outString += ih.substring(i1, i2)
  207.     if(dyn)
  208.       outString += "</SPAN>"
  209.   }
  210.   function animate()
  211.   {
  212.     el = animateElements[currentElement]
  213.     animation = el.getAttribute(dynamicanimAttr, false)
  214.     step++
  215.     if(animation == "spiral")
  216.     {
  217.       steps = stepsSpiral
  218.       v = step/steps
  219.       rf = 1.0 - v
  220.       t = v * 2.0*Math.PI
  221.       rx = Math.max(Math.abs(el.initLeft), 200)
  222.       ry = Math.max(Math.abs(el.initTop),  200)
  223.       el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
  224.       el.style.posTop  = Math.ceil(-rf*Math.sin(t)*ry)
  225.     }
  226.     else if(animation == "zoomIn")
  227.     {
  228.       steps = stepsZoom
  229.       el.style.fontSize = Math.ceil(50+50*step/steps) + "%"
  230.       el.style.posLeft = 0
  231.     }
  232.     else if(animation == "zoomOut")
  233.     {
  234.       steps = stepsZoom
  235.       el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"
  236.       el.style.posLeft = 0
  237.     }
  238.     else
  239.     {
  240.       steps = stepsFly
  241.       if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
  242.         steps = stepsWord
  243.       dl = el.initLeft / steps
  244.       dt = el.initTop  / steps
  245.       el.style.posLeft = el.style.posLeft - dl
  246.       el.style.posTop = el.style.posTop - dt
  247.     }
  248.     if (step >= steps)
  249.     {
  250.       el.style.posLeft = 0
  251.       el.style.posTop = 0
  252.       currentElement++
  253.       step = 0
  254.     }
  255.     if(currentElement < animateElements.length)
  256.       window.setTimeout("animate();", speed)
  257.   }
  258. </script>
  259. </head>
  260.  
  261. <body TEXT="#000000" LINK="#000000" ALINK="#FFD700" VLINK="#FFD700"
  262. onload="dynAnimation8()">
  263.  
  264. <p dynamicanimation8="dropWord" style="position: relative; left: 10000"><font color="#FF0000"><big><big>Observa
  265. como caen las palabras hasta completar un párrafo. Es un efecto muy llamativo
  266. para destacar cualquier tipo de mensajes en tu página web. Coloca este script
  267. en tu página web.</big></big></font></p>
  268.  
  269. <p align="center"><a href="http://www.uterra.com">www.uterra.com</a></p>
  270. </body>
  271.  
  272. </html>
« Última modificación: Abril 18, 2014, 11:23:49 am por Expermicid »
En línea

Páginas: [1]   Ir Arriba
« anterior próximo »
 

[JavaScript][BASICO] Resolver funciones matemáticas (Versión simple) By 2Fac3R

Iniciado por 2Fac3R

 Respuestas: 0
Vistas: 2249 		Último mensaje Diciembre 23, 2012, 12:55:06 am
por 2Fac3R
[JavaScript] 4 clase: Datos Boleanos o Logicos, variables indefinidas o nulas

Iniciado por ANTRAX

 Respuestas: 0
Vistas: 2864 		Último mensaje Febrero 24, 2010, 11:02:19 am
por ANTRAX
[HTML][BASICO] Script ''Haga desfilar un texto mediante la etiqueta <marquee>''

Iniciado por ANTRAX

 Respuestas: 0
Vistas: 2041 		Último mensaje Febrero 24, 2010, 11:15:37 am
por ANTRAX
[JavaScript] 5 clase: Funcion typeof y reasignacion dinamica de variables

Iniciado por ANTRAX

 Respuestas: 0
Vistas: 2875 		Último mensaje Febrero 24, 2010, 11:03:06 am
por ANTRAX
[PDF] 1000 Libros - La guía suprema de JAVASCRIPT - NODE.JS - D3.JS - REACT

Iniciado por graphixx

 Respuestas: 2
Vistas: 5503 		Último mensaje Julio 21, 2019, 12:35:00 am
por graphixx