英语信件

How to create an animated old letter Today we will create an animated old letter. In this letter, we will use an animated pen. When the pen dries out – we’ll dip it in the ink. And even more, we add the feature to emulate the errors that will be erased during typing. Now let’s look at the implementation.

如何创建动画旧字母今天，我们将创建动画旧字母。 在这封信中，我们将使用动画笔。 当笔变干时–我们将其浸入墨水中。 甚至更多，我们添加了该功能来模拟将在键入过程中消除的错误。 现在让我们看一下实现。

现场演示

步骤1. HTML (Step 1. HTML)

As the first step, we should prepare basic html file with our letter:

第一步，我们应该准备带字母的基本html文件：

index.html (index.html)

<div id="letter"></div><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></div>

<div id="letter"></div><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></div>

There are a letter source (which will be hidden), an empty container for future letter, and 2 fixed images (to display an ink and dipping pen in the ink.

有一个信源(将被隐藏)，一个空容器以备以后的信和两个固定图像(以显示墨水和墨水中的蘸水笔)。

步骤2. CSS (Step 2. CSS)

Before we start preparing the main JavaScript code, let’s customize our design:

在开始准备主要JavaScript代码之前，让我们自定义设计：

style.css (style.css)

body {background: url('bg.jpg') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}
#inkwell1 {bottom: 100px;left: 140px;position: fixed;
}
#inkwell2 {bottom: 100px;left: 140px;position: fixed;visibility: hidden;
}
#letter {font-family: Comic Sans MS;font-size: 18px;font-weight: bold;margin: 50px auto;position: relative;width: 75%;
}
#letter_src {display: none;
}

body {background: url('bg.jpg') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;
}
#inkwell1 {bottom: 100px;left: 140px;position: fixed;
}
#inkwell2 {bottom: 100px;left: 140px;position: fixed;visibility: hidden;
}
#letter {font-family: Comic Sans MS;font-size: 18px;font-weight: bold;margin: 50px auto;position: relative;width: 75%;
}
#letter_src {display: none;
}

As you can see – both ink images are fixed, and letter source is hidden by default.

如您所见–墨迹图像都是固定的，默认情况下字母来源是隐藏的。

步骤3. JavaScript (Step 3. JavaScript)

Now we are ready to the main javascript code:

现在我们准备好主要JavaScript代码：

script.js (script.js)

window.onload = function(){// public variablesvar vLetter = document.getElementById('letter');var iSpeedInk = 5;// other variablesvar sText = document.getElementById('letter_src').innerHTML;var iCurChar = 0;var sChars = '<span>';var iCurInk = 0;var sCurCaret = '';var sCaret = "&nbsp;<img src='pen.gif' style='position:absolute' />";var doStep = function () {// current charvar sChar = sText.charAt(iCurChar);// default char delayvar iDelay = 32;if (sChar == '') {sCurCaret = '';} else if (sChar == '|') { // we use | symbol to emulate 'error' symbolsChar = '';sChars = sChars.substring(0, sChars.length-1);iDelay = 64;} else if (sChar == '<') { // pass tagsvar iPos = sText.indexOf('>', iCurChar);sChar = sText.substring(iCurChar, iPos + 1);iCurChar = iPos;} else if (sChar == '&') { // pass html entitiesvar iPos = sText.indexOf(';', iCurChar);sChar = sText.substring(iCurChar, iPos + 1);iCurChar = iPos;} else if (sChar == '.') { // custom delay in case of . symboliDelay = 300;} else if (sChar == ',') { // custom delay in case of , symboliDelay = 100;} else if (sChar == ' ') { // custom delay in case of space symboliDelay = 32;} else if (iCurChar > 5) {sCurCaret = sCaret;}// expenditure of inkif (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 Inkif (iCurInk > 160) {iCurInk = 0;document.getElementById('inkwell2').style.visibility = 'visible';iDelay = 1000;sCurCaret = '';}// add current char to charssChars += sChar;// hide the caret at the end of the letterif (iCurChar == sText.length - 1)sCurCaret = '';// update letter with new charsvLetter.innerHTML = sChars + sCurCaret;// goto next chariCurChar++;// next stepif (iCurChar < sText.length) {setTimeout(doStep, 20 + iDelay);}}doStep();
};

window.onload = function(){// public variablesvar vLetter = document.getElementById('letter');var iSpeedInk = 5;// other variablesvar sText = document.getElementById('letter_src').innerHTML;var iCurChar = 0;var sChars = '<span>';var iCurInk = 0;var sCurCaret = '';var sCaret = "&nbsp;<img src='pen.gif' style='position:absolute' />";var doStep = function () {// current charvar sChar = sText.charAt(iCurChar);// default char delayvar iDelay = 32;if (sChar == '') {sCurCaret = '';} else if (sChar == '|') { // we use | symbol to emulate 'error' symbolsChar = '';sChars = sChars.substring(0, sChars.length-1);iDelay = 64;} else if (sChar == '<') { // pass tagsvar iPos = sText.indexOf('>', iCurChar);sChar = sText.substring(iCurChar, iPos + 1);iCurChar = iPos;} else if (sChar == '&') { // pass html entitiesvar iPos = sText.indexOf(';', iCurChar);sChar = sText.substring(iCurChar, iPos + 1);iCurChar = iPos;} else if (sChar == '.') { // custom delay in case of . symboliDelay = 300;} else if (sChar == ',') { // custom delay in case of , symboliDelay = 100;} else if (sChar == ' ') { // custom delay in case of space symboliDelay = 32;} else if (iCurChar > 5) {sCurCaret = sCaret;}// expenditure of inkif (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 Inkif (iCurInk > 160) {iCurInk = 0;document.getElementById('inkwell2').style.visibility = 'visible';iDelay = 1000;sCurCaret = '';}// add current char to charssChars += sChar;// hide the caret at the end of the letterif (iCurChar == sText.length - 1)sCurCaret = '';// update letter with new charsvLetter.innerHTML = sChars + sCurCaret;// goto next chariCurChar++;// next stepif (iCurChar < sText.length) {setTimeout(doStep, 20 + iDelay);}}doStep();
};

The main idea – to produce all the symbols of the letter one by one. Depending on a current character we can set different delays and simulate errors. In order to simulate ‘the expenditure of ink’ – we check for space symbol, in the result – each word has own color (gray gradation). When this color is pretty white – we ‘dip’ it into our ‘inkwell’.

主要思想–逐一生成字母的所有符号。 根据当前角色，我们可以设置不同的延迟并模拟错误。 为了模拟“墨水消耗”，我们检查结果中的空格，每个单词都有自己的颜色(灰色渐变)。 如果该颜色是白色，则将其“浸入”到“墨池”中。

现场演示

[sociallocker]

[社交储物柜]

下载包

[/sociallocker]

[/ sociallocker]

结论 (Conclusion)

I hope that everything is clean in today’s tutorial. If you have any suggestions about further ideas for articles – you are welcome to share them with us. Good luck in your work!

我希望今天的教程一切正常。 如果您对文章的进一步建议有任何建议，欢迎与我们分享。 祝您工作顺利！

翻译自: https://www.script-tutorials.com/animated-old-letter/

英语信件