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.
Step 1. HTML
As the first step, we should prepare basic html file with our letter:
index.html
01 |
< div id = "letter" ></ div > |
02 |
< img id = "inkwell1" src = "inkwell1.gif" alt = "inkwell1" /> |
03 |
< img id = "inkwell2" src = "inkwell2.gif" alt = "inkwell2" /> |
05 |
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 > |
06 |
'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 > |
07 |
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 > |
08 |
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 > |
09 |
The man looked at the letter for a long time. 'I'll give you two pounds for it,' he said at last.< br >< br > |
10 |
'Only two pounds!' said Grant. 'But people pay ten pounds for old letters. And I have even cleaned it.'< br >< br > |
11 |
'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 > |
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.
Step 2. CSS
Before we start preparing the main JavaScript code, let’s customize our design:
style.css
02 |
background : url ( 'bg.jpg' ) no-repeat center center fixed ; |
03 |
-webkit-background- size : cover; |
04 |
-moz-background- size : cover; |
05 |
-o-background- size : cover; |
06 |
background- size : cover; |
20 |
font-family : Comic Sans MS; |
As you can see – both ink images are fixed, and letter source is hidden by default.
Step 3. JavaScript
Now we are ready to the main javascript code:
script.js
01 |
window.onload = function (){ |
03 |
var vLetter = document.getElementById( 'letter' ); |
06 |
var sText = document.getElementById( 'letter_src' ).innerHTML; |
08 |
var sChars = '<span>' ; |
11 |
var sCaret = " <img src='pen.gif' style='position:absolute' />" ; |
12 |
var doStep = function () { |
14 |
var sChar = sText.charAt(iCurChar); |
19 |
} else if (sChar == '|' ) { |
21 |
sChars = sChars.substring(0, sChars.length-1); |
23 |
} else if (sChar == '<' ) { |
24 |
var iPos = sText.indexOf( '>' , iCurChar); |
25 |
sChar = sText.substring(iCurChar, iPos + 1); |
27 |
} else if (sChar == '&' ) { |
28 |
var iPos = sText.indexOf( ';' , iCurChar); |
29 |
sChar = sText.substring(iCurChar, iPos + 1); |
31 |
} else if (sChar == '.' ) { |
33 |
} else if (sChar == ',' ) { |
35 |
} else if (sChar == ' ' ) { |
37 |
} else if (iCurChar > 5) { |
43 |
sChar = '</span><span style="color:RGB(' + (iCurInk) + ',' + (iCurInk) + ',' + (iCurInk) + ')">' + sChar; |
45 |
if (document.getElementById( 'inkwell2' ).style.visibility == 'visible' ) { |
47 |
document.getElementById( 'inkwell2' ).style.visibility = 'hidden' ; |
48 |
sChar = '</span><span style="color:RGB(0,0,0)">' + sChar; |
53 |
document.getElementById( 'inkwell2' ).style.visibility = 'visible' ; |
60 |
if (iCurChar == sText.length - 1) |
63 |
vLetter.innerHTML = sChars + sCurCaret; |
67 |
if (iCurChar < sText.length) { |
68 |
setTimeout(doStep, 20 + iDelay); |
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]
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!