Главная » Статьи » Графика для Сайта

Самопишущие перо с класным эффектом

Посмотрите ДЕМО
В то место где будет Текст
Код
<div id="letter_src">  
Hawk.do.am<br>  
Скрипты для uCoz<br>  
Шаблоны для uCoz<br>  
Графика для uCoz<br>  
Присоеднияйтесь к нам <br>  
И вы Сможете улучшить свой сайт легко и быстро!<br>  
</div>  
<div id="letter"></div>  
<img id="inkwell1" src="http://hawk.do.am/Kartinki1/inkwell1.gif" />  
<img id="inkwell2" src="http://hawk.do.am/Kartinki1/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>
Категория: Графика для Сайта | Добавил: slavick (30.07.2013)
Просмотров: 133 | Теги: эффектом, класным, перо, Самопишущие | Рейтинг: 1.0/3
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]