Lecaw

Учимся создавать Web-сайты

Создание старого письма при помощи анимации JavaScript

August 25, 2012 151hits

Сегодня мы будем создавать анимированное старое письмо, для этого мы будем использовать анимацию JavaScript. В этом письме, мы добавим анимированное перо. Когда перо высыхает – мы будем окунать его в чернила. И даже более того, мы установили функцию эмуляции ошибок, которые будут стерты во время набора текста.

ДЕМО Исходные файлы

 

 

Шаг 1. HTML разметка

В качестве первого шага мы подготовим основную 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>

Есть источник письма (который будет скрыт), пустой контейнер для нового письма и 2 изображения (чернила и перо).

Шаг 2. CSS

Прежде чем мы подготовим основную анимацию в JavaScript, давайте настроим 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;
}

Изображение чернил зафиксировано, и источник букв по умолчанию скрыт.

Шаг 3. JavaScript

Основной код и анимация JavaScript:

window.onload = function(){
// доступные переменные
var vLetter = document.getElementById('letter');
var iSpeedInk = 5; // остальные переменные
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 () {
// текущий символ
var sChar = sText.charAt(iCurChar); // задержка символов по умолчанию
var iDelay = 32; if (sChar == '') {
sCurCaret = '';
} else if (sChar == '|') { // функция ошибок
sChar = '';
sChars = sChars.substring(0, sChars.length-1);
iDelay = 64;
} else if (sChar == '<') { // теги передачи
var iPos = sText.indexOf('>', iCurChar);
sChar = sText.substring(iCurChar, iPos + 1);
iCurChar = iPos;
} else if (sChar == '&') { // передача HTML объектов
var iPos = sText.indexOf(';', iCurChar);
sChar = sText.substring(iCurChar, iPos + 1);
iCurChar = iPos;
} else if (sChar == '.') {
iDelay = 300;
} else if (sChar == ',') {
iDelay = 100;
} else if (sChar == ' ') {
iDelay = 32;
} else if (iCurChar > 5) {
sCurCaret = sCaret;
} // расход чернил
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;
} // обновление чернил
if (iCurInk > 160) {
iCurInk = 0;
document.getElementById('inkwell2').style.visibility = 'visible';
iDelay = 1000;
sCurCaret = '';
} // добавление символа к текущему
sChars += sChar;
if (iCurChar == sText.length - 1)
sCurCaret = ''; // обновление письма с новыми символами
vLetter.innerHTML = sChars + sCurCaret; // следующий символ
iCurChar++; // следующий шаг
if (iCurChar < sText.length) {
setTimeout(doStep, 20 + iDelay);
}
} doStep();
};

Основная идея состоит в том, чтобы воспроизвести все символы один за другим (анимация письма). В зависимости от текущего символа мы можем установить различную задержку и функцию ошибок. Чтобы моделировать 'расходы чернил' – мы проверяем символ пробела, в результате – у каждого слова есть собственный цвет (серая градация). Когда этот цвет становится блеклым – мы опускаем его в нашу 'чернильницу'.

ДЕМО Исходные файлы

Дополнительная информация

RATTING:
(0 голосов)

Медиа