Главная » Статьи » Графика для Сайта |
Самопишущие перо с класным эффектом
![]() Посмотрите ДЕМО В то место где будет Текст Код <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> | |
Просмотров: 192 | | |
Всего комментариев: 0 | |