javascript код эффекта - Текст написаный пером javascript код эффекта - Текст написаный пером - Архив
javascript код эффекта - Текст написаный пером
DownLoad_Free

javascript код эффекта - Текст написаный пером - Архив

Нашли ошибку или
хотите что-то сообщить -
жмите Ctr+Enter Система Orphus



    [Ленточный вид форума] [Поиск] [RSS]



Страница 1 из 11
Архив » История мировых и локальных событий » История развития сайта » javascript код эффекта - Текст написаный пером
javascript код эффекта - Текст написаный пером
Дата: Пятница, 31.08.2012, 06:35 | Сообщение # 1
Группа: Администраторы
Сообщений: 1524
<html>
<head>
<style>
#inkwell1 {
top: 300px;
left: 240px;
position: fixed;
}
#inkwell2 {
top: 300px;
left: 240px;
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;
}

</style>

<script>
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='http://kachay.ucoz.org/old_letter/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();
};

</script>
</head>
<body>

<div id="letter"></div>
<img id="inkwell1" src="http://kachay.ucoz.org/old_letter/inkwell1.gif" alt="inkwell1" />
<img id="inkwell2" src="http://kachay.ucoz.org/old_letter/inkwell2.gif" alt="inkwell2" />

<div id="letter_src">
Очень оригинальный эффект вывода текста на экран, имитирующий ||| написание текста чернильным пером. <br />По мере того как чернила | заканчиваются на кончике пера, текст становится более бледным и когда он достигает определенной бледности, |||||перо отправляется в чернильницу. Кроме этого имитируется эффект "о|||||шибки" , как будто мы написали слово неправильно, и затем переписали его заново.</div>


</body>
</html>

------------------------------------------------
Источник: http://www.script-tutorials.com/animated-old-letter/
Перевод на русский: http://ruseller.com/lessons.php?rub=28&id=1523
Адаптация к Ucoz: http://kachay.ucoz.org/load/old_letter_text_perom/27-1-0-329
 
Архив » История мировых и локальных событий » История развития сайта » javascript код эффекта - Текст написаный пером
Страница 1 из 11
Поиск:


Copyright kachay.ucoz.org © 2008-2016Хостинг от uCoz
^ Наверх ^
Пригодилось!