How we animated the letter in HTML, CSS and JavaScript
So this the way of design animation in the letter in old type
HTML Coding
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>animated-old-letter</title>
<!-- Required header files-->
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<br clear="all">
<center>
<div style="font-family:Verdana, Geneva, sans-serif; font-size:24px;">How to create an animated old letter</div><br clear="all" /><br clear="all" />
<center>
<div class="vpb_main_wrapper" align="left">
<!-- Code Begins -->
<div id="letter" align="left"></div><br clear="all">
<img id="inkwell1" src="inkwell1.gif" alt="inkwell1" />
<img id="inkwell2" src="inkwell2.gif" alt="inkwell2" />
<div id="letter_src">
A man named Grant once foi|und a box of old Papers in his dwelling||||||||house. Grant didn't like old things. So he burned most of the papers. But one of these papers was a letter. He read it. A well-known writer had written it.<br><br>
'About a million|||||||hundred years ago nobody know about him|||this writer,' thought Grant. 'Nobody read his books. But now everybody reads him. Some people like to buy old letters. I can get a lot of money for this letter.'<br><br>
But the letter looked dirty. So Grant decided to wash |||||clean it. He worked hard and soon the letter looked new. Grant was not|||||||was very happy.<br><br>
He took the letter to a shop in London where they bought and sold old papers. 'I want to sell this letter,' Grant said to the man in shop. 'It is a well-known writer's letter. How much will you give me for it?'<br><br>
The man looked at the letter for a long time. 'I'll give you two pounds for it,' he said at last.<br><br>
'Only two pounds!' said Grant. 'But people pay ten pounds for old letters. And I have even cleaned it.'<br><br>
'I can see that,' said the man. 'That's the mistake. People who buy old papers like dirty papers more than clean papers.'<br><br>
Here comes the end.<br /><br />
</div>
<!-- Code Ends -->
</div>
</center>
</center>
</body>
</html>
JavaScript Coding:
window.onload = function()
{
// public variables
var vLetter = document.getElementById('letter');
var iSpeedInk = 5;
// other variables
var sText = document.getElementById('letter_src').innerHTML;
var iCurChar = 0;
var sChars = '<span>';
var iCurInk = 0;
var sCurCaret = '';
var sCaret = " <img src='pen.gif' style='position:absolute' />";
var doStep = function () {
// current char
var sChar = sText.charAt(iCurChar);
// default char delay
var iDelay = 32;
if (sChar == '') {
sCurCaret = '';
} else if (sChar == '|') { // we use | symbol to emulate 'error' symbol
sChar = '';
sChars = sChars.substring(0, sChars.length-1);
iDelay = 64;
} else if (sChar == '<') { // pass tags
var iPos = sText.indexOf('>', iCurChar);
sChar = sText.substring(iCurChar, iPos + 1);
iCurChar = iPos;
} else if (sChar == '&') { // pass html entities
var iPos = sText.indexOf(';', iCurChar);
sChar = sText.substring(iCurChar, iPos + 1);
iCurChar = iPos;
} else if (sChar == '.') { // custom delay in case of . symbol
iDelay = 300;
} else if (sChar == ',') { // custom delay in case of , symbol
iDelay = 100;
} else if (sChar == ' ') { // custom delay in case of space symbol
iDelay = 32;
} else if (iCurChar > 5) {
sCurCaret = sCaret;
}
// expenditure of ink
if (sChar == ' ') {
iCurInk += iSpeedInk;
sChar = '</span><span style="color:RGB(' + (iCurInk) + ',' + (iCurInk) + ',' + (iCurInk) + ')">' + sChar;
}
if (document.getElementById('inkwell2').style.visibility == 'visible') {
sCurCaret = sCaret;
document.getElementById('inkwell2').style.visibility = 'hidden';
sChar = '</span><span style="color:RGB(0,0,0)">' + sChar;
}
// refresh Ink
if (iCurInk > 160) {
iCurInk = 0;
document.getElementById('inkwell2').style.visibility = 'visible';
iDelay = 1000;
sCurCaret = '';
}
// add current char to chars
sChars += sChar;
// hide the caret at the end of the letter
if (iCurChar == sText.length - 1)
sCurCaret = '';
// update letter with new chars
vLetter.innerHTML = sChars + sCurCaret;
// goto next char
iCurChar++;
// next step
if (iCurChar < sText.length) {
setTimeout(doStep, 20 + iDelay);
}
}
doStep();
};
CSS Coding:
/*Form Wrapper*/
.vpb_main_wrapper
{
width:900px;
margin: 0 auto;
border: solid 1px #cbcbcb;
background-color: #FFF;
box-shadow: 0 0 15px #cbcbcb;
-moz-box-shadow: 0 0 15px #cbcbcb;
-webkit-box-shadow: 0 0 15px #cbcbcb;
-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;
padding:10px;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
* {
margin: 0;
padding: 0;
}
header {
background-color:rgba(33, 33, 33, 0.9);
color:#fff;
display:block;
font: 14px/1.3 Arial,sans-serif;
height:50px;
position:relative;
}
header h2{
font-size: 22px;
margin: 0px auto;
padding: 10px 0;
width: 80%;
text-align: center;
}
header a, a:visited {
text-decoration:none;
color:#fcfcfc;
}
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#inkwell1 {
top: 140px;
left: 140px;
position: fixed;
}
#inkwell2 {
top: 140px;
left: 140px;
position: fixed;
visibility: hidden;
}
#letter {
font-family: Comic Sans MS;
font-size: 18px;
font-weight: bold;
margin: 10px auto;
position: relative;
width: 100%;
float:left;
}
#letter_src {
display: none;
}
So this is coding of animation the letter in old type
Real Translator Jobs - New Top Offer! - $100 Bonus To New Affiliates! (view mobile)
No comments :
Post a Comment