comment
IRC Chat
play_arrow
Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

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

  • 0 Respuestas
  • 1242 Vistas

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

Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5411
  • Actividad:
    20%
  • Reputación 33
  • ANTRAX
    • Ver Perfil
    • Underc0de
    • Email
  • Skype: underc0de.org
  • Twitter: @Underc0de
« 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 »


 

¿Te gustó el post? COMPARTILO!



[JavaScript] 4 clase: Datos Boleanos o Logicos, variables indefinidas o nulas

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1484
Último mensaje Febrero 24, 2010, 11:02:19 am
por ANTRAX
[JavaScript][BASICO] Resolver funciones matemáticas (Versión simple) By 2Fac3R

Iniciado por 2Fac3R

Respuestas: 0
Vistas: 1129
Último mensaje Diciembre 23, 2012, 12:55:06 am
por 2Fac3R
[JavaScript][AVANZADO] Trabajar con DOM desde Firefox e Internet Explorer

Iniciado por arthusu

Respuestas: 0
Vistas: 1618
Último mensaje Julio 16, 2011, 07:05:12 pm
por arthusu
[JavaScript] 5 clase: Funcion typeof y reasignacion dinamica de variables

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1655
Último mensaje Febrero 24, 2010, 11:03:06 am
por ANTRAX
[JavaScript] 6 clase: funciones parseInt, parseFloat y condificonales

Iniciado por ANTRAX

Respuestas: 0
Vistas: 1870
Último mensaje Febrero 24, 2010, 11:04:05 am
por ANTRAX