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

Iniciado por ANTRAX, Febrero 24, 2010, 11:16:49 AM

Tema anterior - Siguiente tema

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

Imprimir
Ir Abajo Páginas1
Acciones del Usuario
Febrero 24, 2010, 11:16:49 AM Ultima modificación: Junio 01, 2021, 03:23:40 PM por AXCESS
No tienes permitido ver enlaces. Registrate o Entra a tu cuenta

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

Código: javascript
<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>

Mayo 30, 2021, 03:15:55 AM #1
no me sirvio que raro! :-[ :-[
Junio 01, 2021, 01:29:37 AM #2
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
<blockquote contenteditable="true"><q>Texto fade in slowly.</q>
  <cite>tinc0h</cite>
</blockquote>


Código: css
* {
  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
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
<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
@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
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!
Imprimir
Ir Arriba Páginas1
Acciones del Usuario