Skip to content

Instantly share code, notes, and snippets.

@eMahtab
Created December 14, 2015 18:12
Show Gist options
  • Save eMahtab/a8a6cc0cc52a2f302471 to your computer and use it in GitHub Desktop.
Save eMahtab/a8a6cc0cc52a2f302471 to your computer and use it in GitHub Desktop.
Typing Text with Image
<html>
<head>
<style>
#myTypingText {
padding:12px;
color:#FFF;
font-family:Courier New, Helvetica, sans-serif;
font-size:20px;
line-height:1.5em;
}
#signature {
padding:12px;
color:#FFF;
font-family:Courier New, Helvetica, sans-serif;
font-size:20px;
line-height:1.5em;
}
</style>
</head>
<body bgcolor="#232526">
<div>
<div id="myTypingText"></div>
<br/>
<div>
<p align="center" id="signature"></p>
</div>
<div align="center">
<img id="first"/>
</div>
</div>
<script>
var myString = "Life becomes awesome when you know it is. Thinking small will make you doing small which will end up dreaming small. ";
myString+="Life becomes awesome when you know it is. ";
var myArray = myString.split("");
var loopTimer;
function frameLooper() {
if(myArray.length > 0) {
document.getElementById("myTypingText").innerHTML += myArray.shift();
} else {
clearTimeout(loopTimer);
document.getElementById("first").src="first.PNG";
return false;
}
loopTimer = setTimeout('frameLooper()',50);
}
frameLooper();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment