Перо невидимки которое пишет Ваш текст
Данный скрипт работает во всех браузерах,имеет несложные настройки и Вы с лёгкостью настроите его под свои цели.Однако работать он будет только на страницах сайта вотпример.В материалах модулей он не работает,потому что редактор искажает применяемый код.Как видно в примере перо макается в чернильницу через определённое время и происходит переписывание ошибки написания ввода.Для установки переписываемого эффекта Вам потребуется перед заменяемым словом поставить символы | в количестве заменяемого слова.Ещё хочу обратить Ваше внимание на положение чернильницы,оно фиксированное но может быть изменено.
Для изменения положения чернильницы измените значение свойств ▼.
bottom - положение от нижнего края страницы.
left - положение от левого края страницы.
Замена должна быть произведена в 2 местах,#inkwell1 и #inkwell2 - значения должны быть одинаковыми в обоих идентификаторах.Так же можно изменить применяемый шрифт и его размер.
Подробнее о шрифтах смотрите материал здесь ▼.
font-family - семейство шрифта.
font-size - размер шрифта.
font-weight - величина шрифта.
Ещё могу посоветовать самим определять места переноса строк,используйте для этого тег<br>.С примером кода можно поэкспериментировать используя HTML редактор который находится ниже.Для установки скрипта на странице Вы можете скопировать на неё весь код скрипта.Если появились вопросы,задавайте их в комментарии материала.
Пример кода скрипта
<div id="letter_src">
Это испытание|||||||||проверка скрипта.<br>
Попробуйте заменить||||||||изменить значения.<br>
Попробуйте заменить||||||||изменить положение.<br>
Перо макается в чернильницу через определённое время,<br>
если текста много,это будет происходить не один раз.<br>
Можно изменить используемый||||||||||||применяемый шрифт и его размер.<br>
Подробнее о шрифтах смотрите в материалах сайта.<br>
Если у Вас появились вопросы,задавайте их в комментарии.
</div>
<div id="letter"></div>
<img id="inkwell1" src="http://delaisait.ucoz.ru/script/img/1/inkwell1.gif" alt="inkwell1" />
<img id="inkwell2" src="http://delaisait.ucoz.ru/script/img/1/inkwell2.gif" alt="inkwell2" />
<style>
#inkwell1 {
bottom: 50px;
left: 100px;
position: fixed;
}
#inkwell2 {
bottom: 50px;
left: 100px;
position: fixed;
visibility: hidden;
}
#letter {
font-family: Comic Sans MS;
font-size: 18px;
font-weight: bold;
margin: 50px auto;
position: relative;
width: 100%;
}
#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://delaisait.ucoz.ru/script/img/1/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 == '&') {
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>
| 
