Создаем анимированное перо - 9 Августа 2013

Заходи

Гость

Старая форма входа

Статистика

Онлайн всего: 1

Гостей: 1

Пользователей: 0

Ccылки

Свежак

Главная » » Создаем анимированное перо

10:25

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

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

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

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

Шаг 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.

'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.'

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. 

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?'

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

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

'I can see that,' said the man. 'That's the mistake. People who buy old papers like dirty papers more than clean papers.' 

</div>

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

Шаг 2. CSS

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

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:

script.js

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 = '';

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 = '' + sChar;

}

if (document.getElementById('inkwell2').style.visibility == 'visible') {

sCurCaret = sCaret;

document.getElementById('inkwell2').style.visibility = 'hidden';

sChar = '' + 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();

};<font></font>

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

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

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

Категория: jQuery/JS | Просмотров: 795 | Добавил: Iron | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Статьи

	[Прогараммирование]
Как работает CSS?

	[Прогараммирование]
ЛЕКЦИЯ. Язык Pascal

	[Прогараммирование]
Статический анализ: ошибки в медиаплеере и безглючная аська

	[Операционные системы]
Особенности применения технологий Lotus Domino и Notes в современных информационных системах

	[Прогараммирование]
Разработка ПО с открытыми исходными текстами как особый вид прикладной науки

	[Устронение ошибок систем]
Устранение неполадок при возникновении (синего экрана) Blue Screen Of Death (BSOD) (2)

	[Прогараммирование]
Строковый тип данных

	[Прогараммирование]
Как работает CSS?(часть 2 Шрифты, Текст и Ссылки)

	[Прогараммирование]
ДОКУМЕНТИРОВАНИЕ ПРОГРАММ

	[Операционные системы]
MAC OS

Категории

HTML/CSS [21]

jQuery/JS [36]

PHP [4]

Для Ucoz [38]

Популярный софт

Iron
Kaspersky Internet Security 2015

Iron
Virtual DJ

Iron
SoundForge 11

Iron
Alcohol 120

Iron
Norton Internet Security 2014

Iron
Loaris Trojan Remover

Жми

Конструктор сайтов - uCoz