Перо пишущее текст | Скрипт для сайта - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Понедельник, 05.12.2016
Скрипты для uCoz » Текстовые эффекты » Перо пишущее текст | Скрипт для сайта

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Перо пишущее текст | Скрипт для сайта


Перо невидимки которое пишет Ваш текст




Данный скрипт работает во всех браузерах,имеет несложные настройки и Вы с лёгкостью настроите его под свои цели.Однако работать он будет только на страницах сайта вот пример.В материалах модулей он не работает,потому что редактор искажает применяемый код.Как видно в примере перо макается в чернильницу через определённое время и происходит переписывание ошибки написания ввода.Для установки переписываемого эффекта Вам потребуется перед заменяемым словом поставить символы | в количестве заменяемого слова.Ещё хочу обратить Ваше внимание на положение чернильницы,оно фиксированное но может быть изменено.
Для изменения положения чернильницы измените значение свойств ▼.
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 = "&nbsp;<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>

Проверить код скрипта на месте

Вставьте код скрипта в HTML редактор и проверьте.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 3372 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: скрипт для юкоз

    Всего комментариев: 4
    0   Спам
    4 alexss   (16.03.2016 12:12)
    Аватар alexss здравстсвуйте.. можно ли изменить сам шрифт ок сам нашол все можно

    0   Спам
    3 Zemiel   (12.09.2014 15:53)
    Аватар Zemiel Добрый день!
    Можно чернильницу сделать строго под текстом, чтоб она не реагировала на скролл?
    Решение найдено меняем эти показатели
    left:
    position:
    притом у анимаций чернильниц они будут разные!

    0   Спам
    2 MasterBel   (03.01.2014 12:21)
    Аватар MasterBel http://delaisait.ucoz.ru/script/img/1/inkwell1.gif - ЧЕРНИЛА
    http://delaisait.ucoz.ru/script/img/1/inkwell2.gif - ЧЕРНИЛА С ПЕРОМ
    http://delaisait.ucoz.ru/script/img/1/pen.gif - ПЕРО. Его размер 143х116 а нужно какое???

    0   Спам
    1 бав   (03.01.2014 11:12)
    Аватар бав Привет, подскажи пожалуйста, какой код отвечает за чернила картинку, а какой за перо?, возможно ли просто чернила убрать, а перо чуток уменьшить?


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