[JavaScript][MEDIO] Texto que aparece palabra por palabra

  • 2 Respuestas
  • 2656 Vistas

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

Conectado ANTRAX

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


Con este script te aparece el texto que tu quieras desde la parte superior derecha de la pantalla.

Código: (javascript) [Seleccionar]
<html>

<head>
<title>Texto que aparece palabra a palabra</title>
<script LANGUAGE="JavaScript">
  dynamicanimAttr = "mydynamicanimation"
  animateElements = new Array()
  currentElement = 0
  speed = 0
  stepsZoom = 8
  stepsWord = 8
  stepsFly = 12
  stepsSpiral = 16
  steps = stepsZoom
  step = 0
  outString = ""
  function mydynAnimation()
  {
    var ms = navigator.appVersion.indexOf("MSIE")
    ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
    if(!ie4)
    {
      if((navigator.appName == "Netscape") &&
         (parseInt(navigator.appVersion.substring(0, 1)) >= 4))
      {
        for (index=document.layers.length-1; index >= 0; index--)
        {
            layer=document.layers[index]
            if (layer.left==10000)
                layer.left=0
        }
      }
      return
    }
    for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
    {
      el = document.all[index]
      animation = el.getAttribute(dynamicanimAttr, false)
      if(null != animation)
      {
        if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
        {
          ih = el.innerHTML
          outString = ""
          i1 = 0
          iend = ih.length
          while(true)
          {
            i2 = startWord(ih, i1)
            if(i2 == -1)
              i2 = iend
            outWord(ih, i1, i2, false, "")
            if(i2 == iend)
              break
            i1 = i2
            i2 = endWord(ih, i1)
            if(i2 == -1)
              i2 = iend
            outWord(ih, i1, i2, true, animation)
            if(i2 == iend)
              break
            i1 = i2
          }
          document.all[index].innerHTML = outString
          document.all[index].style.posLeft = 0
          document.all[index].setAttribute(dynamicanimAttr, null)
        }
        if(animation == "zoomIn" || animation == "zoomOut")
        {
          ih = el.innerHTML
          outString = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">"
          outString += ih
          outString += "</SPAN>"
          document.all[index].innerHTML = outString
          document.all[index].style.posLeft = 0
          document.all[index].setAttribute(dynamicanimAttr, null)
        }
      }
    }
    i = 0
    for (index=document.body.sourceIndex; index < document.all.length; index++)
    {
      el = document.all[index]
      animation = el.getAttribute(dynamicanimAttr, false)
      if (null != animation)
      {
        if(animation == "flyLeft")
        {
          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
          el.style.posTop = 0
        }
        else if(animation == "flyRight")
        {
          el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
          el.style.posTop = 0
        }
        else if(animation == "flyTop" || animation == "dropWord")
        {
          el.style.posLeft = 0
          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
        }
        else if(animation == "flyBottom")
        {
          el.style.posLeft = 0
          el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
        }
        else if(animation == "flyTopLeft")
        {
          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
        }
        else if(animation == "flyTopRight" || animation == "flyTopRightWord")
        {
          el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
        }
        else if(animation == "flyBottomLeft")
        {
          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
          el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
        }
        else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
        {
          el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
          el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
        }
        else if(animation == "spiral")
        {
          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
          el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
        }
        else if(animation == "zoomIn")
        {
          el.style.posLeft = 10000
          el.style.posTop = 0
        }
        else if(animation == "zoomOut")
        {
          el.style.posLeft = 10000
          el.style.posTop = 0
        }
        else
        {
          el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
          el.style.posTop = 0
        }
        el.initLeft = el.style.posLeft
        el.initTop = el.style.posTop
        animateElements[i++] = el
      }
    }
    window.setTimeout("animate();", speed)
  }
  function offsetLeft(el)
  {
    x = el.offsetLeft
    for (e = el.offsetParent; e; e = e.offsetParent)
      x += e.offsetLeft;
    return x
  }
  function offsetTop(el)
  {
    y = el.offsetTop
    for (e = el.offsetParent; e; e = e.offsetParent)
      y += e.offsetTop;
    return y
  }
  function startWord(ih, i)
  {
    for(tag = false; i < ih.length; i++)
    {
      c = ih.charAt(i)
      if(c == '<')
        tag = true
      if(!tag)
        return i
      if(c == '>')
        tag = false
    }
    return -1
  }
  function endWord(ih, i)
  {
    nonSpace = false
    space = false
    while(i < ih.length)
    {
      c = ih.charAt(i)
      if(c != ' ')
        nonSpace = true
      if(nonSpace && c == ' ')
        space = true
      if(c == '<')
        return i
      if(space && c != ' ')
        return i
      i++
    }
    return -1
  }
  function outWord(ih, i1, i2, dyn, anim)
  {
    if(dyn)
      outString += "<SPAN " + dynamicanimAttr + "=\"" + anim + "\" style=\"position: relative; left: 10000;\">"
    outString += ih.substring(i1, i2)
    if(dyn)
      outString += "</SPAN>"
  }
  function animate()
  {
    el = animateElements[currentElement]
    animation = el.getAttribute(dynamicanimAttr, false)
    step++
    if(animation == "spiral")
    {
      steps = stepsSpiral
      v = step/steps
      rf = 1.0 - v
      t = v * 2.0*Math.PI
      rx = Math.max(Math.abs(el.initLeft), 200)
      ry = Math.max(Math.abs(el.initTop),  200)
      el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
      el.style.posTop  = Math.ceil(-rf*Math.sin(t)*ry)
    }
    else if(animation == "zoomIn")
    {
      steps = stepsZoom
      el.style.fontSize = Math.ceil(50+50*step/steps) + "%"
      el.style.posLeft = 0
    }
    else if(animation == "zoomOut")
    {
      steps = stepsZoom
      el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"
      el.style.posLeft = 0
    }
    else
    {
      steps = stepsFly
      if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
        steps = stepsWord
      dl = el.initLeft / steps
      dt = el.initTop  / steps
      el.style.posLeft = el.style.posLeft - dl
      el.style.posTop = el.style.posTop - dt
    }
    if (step >= steps)
    {
      el.style.posLeft = 0
      el.style.posTop = 0
      currentElement++
      step = 0
    }
    if(currentElement < animateElements.length)
      window.setTimeout("animate();", speed)
  }
</script>

<style>
.link {

color : orange;
font-weight : bold;
text-decoration : none;

}

A.link:hover {
color : lime;
}

A.link:active {
color : greenyellow;
text-decoration : none;
text-transform : uppercase;
}
</style>
</head>

<body onLoad="mydynAnimation()" link="#0000FF" text="#00FF00" VLINK="#0000FF">

<p align="center" style="LEFT: 10000px! important; POSITION: relative! important"
mydynamicanimation="flyTopRightWord"><a href="http://www.uterra.com"
class="link"><font FACE="ARIAL" SIZE="6" color="blue"></font></a></p>

<p align="center" style="LEFT: 10000px! important; POSITION: relative! important"
mydynamicanimation="flyTopRightWord"><font FACE="ARIAL" SIZE="6" color="blue"><a
href="http://www.uterra.com" class="link">Bienvenido a UTERRA.COM</a></font></p>

</body>
</html>
« Última modificación: Junio 01, 2021, 03:23:40 pm por AXCESS »


Desconectado asbel27

  • *
  • User VIP
  • Mensajes: 3
  • Actividad:
    40%
  • Country: ve
  • Reputación 0
  • Skype: ProgramadorAsbel
    • Ver Perfil
no me sirvio que raro! :-[ :-[

Desconectado tinc0h

  • *
  • Underc0der
  • Mensajes: 2
  • Actividad:
    6.67%
  • Country: 00
  • Reputación 0
    • Ver Perfil
    • Email
Con este script se puede obtener algo similar si lo que se busca es la 'animación' en la web.
este es un ejemplo con fade in, hace un rand así que no va a seguir un patrón al ir mostrando el texto.

Código: (html5) [Seleccionar]
<blockquote contenteditable="true"><q>Texto fade in slowly.</q>
  <cite>tinc0h</cite>
</blockquote>

Código: (css) [Seleccionar]
* {
  box-sizing: border-box;
}
body {
  min-height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
blockquote {
  font-size: 3rem;
}
cite {
  display: block;
  text-align: right;
  font-family: Verdana, Arial, sans-serif;
  margin-top: 1rem;
  font-size: .9rem;
  color: #aaa;
  font-style: normal;
}
blockquote q {
  font-family: Georgia, serif;
  font-style: italic;
  letter-spacing: .1rem;
}
blockquote q span {
  will-change: opacity, filter;
  opacity: 0;
  filter: blur(0px);
}
q {
  quotes: "“" "”" "‘" "’";
}
q:before {
    content: open-quote;
    margin-right: .8rem;
}
q:after {
  content: close-quote;
}
q:before, q:after {
  color: #ccc;
  font-size: 4rem;
}

Código: (javascript) [Seleccionar]
function splitWords() {
  let quote = document.querySelector("blockquote q");
  quote.innerText.replace(/(<([^>]+)>)/ig,"");
  quotewords = quote.innerText.split(" "),
  wordCount = quotewords.length;
  quote.innerHTML = "";
  for (let i=0; i < wordCount; i++) {
    quote.innerHTML += "<span>"+quotewords[i]+"</span>";
    if (i < quotewords.length - 1) {
      quote.innerHTML += " ";
    }
  }
  quotewords = document.querySelectorAll("blockquote q span");
  fadeWords(quotewords);
}

function getRandom(min, max) {
  return Math.random() * (max - min) + min;
}

function fadeWords(quotewords) {
  Array.prototype.forEach.call(quotewords, function(word) {
    let animate = word.animate([{
      opacity: 0,
      filter: "blur("+getRandom(2,5)+"px)"
    }, {
      opacity: 1,
      filter: "blur(0px)"
    }],
    {
      duration: 1000,
      delay: getRandom(500,3300),
      fill: 'forwards'
    }
   )
  })
}
splitWords();

Acá dejo otro script que si escribe hacia un lado, se tiene que modificar bastante pero, funciona. También a diferencia del anterio, utiliza Jquery.

Código: (html5) [Seleccionar]
<div class="container--main">
<div class="container--inner">
<div class="intro">
<p class="sub animate">ejemplo de</p>
<p class="title animate">Texto</p>
<p class="sub animate">escribiendose</p>
<p class="sub animate">Hacia un lado</p>
</div>
<div class="name">
<p id="typewriter"></p>
</div>
</div>
</div>

Código: (css) [Seleccionar]
@import url('https://fonts.googleapis.com/css?family=Anton|Oswald:300');
$title : 'Anton', sans-serif;
$sub : 'Oswald', sans-serif;
.container {
&--main {
height: 100vh;
width: 100wh;
padding: 50px 100px;
margin: 0 auto;
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: #111;
}
&--inner {
display: flex;
align-items: center;
justify-content: center;
transition: all 1s linear;
}
}
p {
color: #eee;
font-size: 1.6rem;
text-transform: uppercase;
margin: 0;
}
.intro {
opacity: 0;

&.visible {
opacity: 1;
}
p {
display: block;
text-align: right;
}
.title {
font-family: $title;
font-size: 50px;
}

.sub {
font-family: $sub;
}
}
.name {
font-family: $title;
margin-left: 20px;
line-height: 1;
p {
font-size: 15rem;
line-height: 1;
}
}
.typed-cursor{
    opacity: 1;
    -webkit-animation: blink 0.7s infinite;
    -moz-animation: blink 0.7s infinite;
    animation: blink 0.7s infinite;
}
@keyframes blink{
    0% { opacity:1; }
    50% { opacity:0; }
    100% { opacity:1; }
}

Código: (javascript) [Seleccionar]
function textAnimation() {

    $('.animate').each(function() {
    var $allMsg = $(this);
    var $wordList = $(this).html().split("");
    $(this).html("");
    $.each($wordList, function(idx, elem) {
        var newEL = $("<span/>").text(elem).css({ opacity: 0 });
        newEL.appendTo($allMsg);
        newEL.delay(idx * 70);
        newEL.animate({ opacity: 1 }, 1100);
    });
    });

setTimeout(function() {
$("#typewriter").typed({
strings: ["olakace", "el tincoh pa"],
typeSpeed: 100,
startDelay: 0,
backSpeed: 60,
backDelay: 1000,
loop: true,
cursorChar: "",
contentType: 'html'
});
}, 2000)
}

$(window).on("load", function() {
$('.intro').addClass('visible');
textAnimation();
});


Saludos!