(https://i.postimg.cc/9fLnDqrv/Hacker5.jpg) (https://postimages.org/)
Con este script te aparece el texto que tu quieras desde la parte superior derecha de la pantalla.
<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>
no me sirvio que raro! :-[ :-[
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.
<blockquote contenteditable="true"><q>Texto fade in slowly.</q>
<cite>tinc0h</cite>
</blockquote>
* {
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;
}
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.
<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>
@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; }
}
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!