Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Август » 9 » Создаем анимированное перо


10:59
Создаем анимированное перо

Создаем анимированное перо

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

 Теперь давайте посмотрим на реализацию.

 

Демо                  Загрузка пакета


Шаг 1. HTML

В качестве первого шага мы должны подготовить основной HTML файл для нашего письма:

index.html

    <div id="letter"></div><font></font>

    <img id="inkwell1" src="inkwell1.gif" alt="inkwell1" /><font></font>

    <img id="inkwell2" src="inkwell2.gif" alt="inkwell2" /><font></font>

<font></font>

    <div id="letter_src"><font></font>

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><font></font>

'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><font></font>

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><font></font>

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><font></font>

The man looked at the letter for a long time. 'I'll give you two pounds for it,' he said at last.<br><br><font></font>

'Only two pounds!' said Grant. 'But people pay ten pounds for old letters. And I have even cleaned it.'<br><br><font></font>

'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><font></font>

    </div><font></font>

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

 

Шаг 2. CSS

Прежде чем мы начнем подготовку основного кода JavaScript, давайте настроим наш дизайн:

style.css

body {<font></font>

    background: url('bg.jpg') no-repeat center center fixed;<font></font>

   -webkit-background-size: cover;<font></font>

   -moz-background-size: cover;<font></font>

   -o-background-size: cover;<font></font>

   background-size: cover;<font></font>

}<font></font>

#inkwell1 {<font></font>

    bottom: 100px;<font></font>

    left: 140px;<font></font>

    position: fixed;<font></font>

}<font></font>

#inkwell2 {<font></font>

    bottom: 100px;<font></font>

    left: 140px;<font></font>

    position: fixed;<font></font>

    visibility: hidden;<font></font>

}<font></font>

#letter {<font></font>

    font-family: Comic Sans MS;<font></font>

    font-size: 18px;<font></font>

    font-weight: bold;<font></font>

    margin: 50px auto;<font></font>

    position: relative;<font></font>

    width: 75%;<font></font>

}<font></font>

#letter_src {<font></font>

    display: none;<font></font>

}<font></font>

 

Как вы можете видеть – изображения  чернила  зафиксировано, и письмо источник скрыто по умолчанию.

 

Шаг 3. JavaScript

Теперь мы готовы к созданию главного кода JavaScript:

script.js

window.onload = function(){<font></font>

    // public variables<font></font>

    var vLetter = document.getElementById('letter');<font></font>

    var iSpeedInk = 5;<font></font>

<font></font>

    // other variables<font></font>

    var sText = document.getElementById('letter_src').innerHTML;<font></font>

    var iCurChar = 0;<font></font>

    var sChars = '<span>';<font></font>

    var iCurInk = 0;<font></font>

    var sCurCaret = '';<font></font>

    var sCaret = "&nbsp;<img src='pen.gif' style='position:absolute' />";<font></font>

<font></font>

    var doStep = function () {<font></font>

        // current char<font></font>

        var sChar = sText.charAt(iCurChar);<font></font>

<font></font>

        // default char delay<font></font>

        var iDelay = 32;<font></font>

<font></font>

        if (sChar == '') {<font></font>

            sCurCaret = '';<font></font>

        } else if (sChar == '|') { // we use | symbol to emulate 'error' symbol<font></font>

            sChar = '';<font></font>

            sChars = sChars.substring(0, sChars.length-1);<font></font>

            iDelay = 64;<font></font>

        } else if (sChar == '<') { // pass tags<font></font>

            var iPos = sText.indexOf('>', iCurChar);<font></font>

            sChar = sText.substring(iCurChar, iPos + 1);<font></font>

            iCurChar = iPos;<font></font>

        } else if (sChar == '&') { // pass html entities<font></font>

            var iPos = sText.indexOf(';', iCurChar);<font></font>

            sChar = sText.substring(iCurChar, iPos + 1);<font></font>

            iCurChar = iPos;<font></font>

        } else if (sChar == '.') { // custom delay in case of . symbol<font></font>

            iDelay = 300;<font></font>

        } else if (sChar == ',') { // custom delay in case of , symbol<font></font>

            iDelay = 100;<font></font>

        } else if (sChar == ' ') { // custom delay in case of space symbol<font></font>

            iDelay = 32;<font></font>

        } else if (iCurChar > 5) {<font></font>

            sCurCaret = sCaret;<font></font>

        }<font></font>

<font></font>

        // expenditure of ink<font></font>

        if (sChar == ' ') {<font></font>

            iCurInk += iSpeedInk;<font></font>

            sChar = '</span><span style="color:RGB(' + (iCurInk) + ',' + (iCurInk) + ',' + (iCurInk) + ')">' + sChar;<font></font>

        }<font></font>

<font></font>

        if (document.getElementById('inkwell2').style.visibility == 'visible') {<font></font>

            sCurCaret = sCaret;<font></font>

            document.getElementById('inkwell2').style.visibility = 'hidden';<font></font>

            sChar = '</span><span style="color:RGB(0,0,0)">' + sChar;<font></font>

        }<font></font>

<font></font>

        // refresh Ink<font></font>

        if (iCurInk > 160) {<font></font>

            iCurInk = 0;<font></font>

            document.getElementById('inkwell2').style.visibility = 'visible';<font></font>

            iDelay = 1000;<font></font>

            sCurCaret = '';<font></font>

        }<font></font>

<font></font>

        // add current char to chars<font></font>

        sChars += sChar;<font></font>

<font></font>

        // hide the caret at the end of the letter<font></font>

        if (iCurChar == sText.length - 1)<font></font>

            sCurCaret = '';<font></font>

<font></font>

        // update letter with new chars<font></font>

        vLetter.innerHTML = sChars + sCurCaret;<font></font>

<font></font>

        // goto next char<font></font>

        iCurChar++;<font></font>

<font></font>

        // next step<font></font>

        if (iCurChar < sText.length) {<font></font>

            setTimeout(doStep, 20 + iDelay);<font></font>

        }<font></font>

    }<font></font>

<font></font>

    doStep();<font></font>

};<font></font>

 

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


Демо                   Загрузка пакета


 

Ссылка на источник

Категория: CSS//HTML//JS | Просмотров: 569 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди