Новая версия сайта находится по адресу
wa.artel.by
Материал взят с сайта http://www.projectcool.com/ с нарушением всех авторских прав. Перевод by FireFalcon
Старая добрая пишущая машинка еще пылится у некоторых писателей, перешедших на компьютеры. Однако ностальгия мучает. Вот и воспроизведем эффеект пишущей машинки на каком-нить сайте. Вдруг пригодится. Да, чуть не забыл... К сожалению эта штука в Netscape не работает :(
Скорость выведения букв может быть любой. В этом примере новый символ печатается каждые 100 миллисекунд.
Эффект пишущей машинки встраивается в код через XML. Это для того, чтобы старые браузеры его игнорировали. Пространство имен устанавливается в <html> тэге. Допустим так:
<html xmlns:fx>
Следующий шаг определяет используемый XML тэг. Это делается для специфической media. В этом случае это screen, поэтому надо задать его CSS свойства и ассоциировать их с пространством имен, задав префиксы пространства имен в объявлении (гм, что-то больно непонятно получилось, на примере понятнее). Объявление выглядит где-то так:
<style>
<!--
@media screen{
fx\:TYPEWRITER { behavior:url(typewriter.htc);
font-family: courier;
font-weight: bold;
color: #ff0000; }
}
-->
</style>
Самая важная часть этого всего - behavior-свойство. Только эта часть действительно нужна, и в url должен стоять путь к behavior-файлу typewriter.htc. Взять typewriter.htc файл можно здесь.
Когда все это сделано, разместите XML таг по обе стороны текста, который должен выводиться с эффектом печатающей машинки. Вот так:
<fx:TYPEWRITER speed="120"> Вот это оно и печатает. </fx:TYPEWRITER>
Заметьте, что здесь скорость равна 120. Если вы не укажете скорость, то текст будет выводиться с дефолтовой, которая равно 100.
А вот и скрипт
<EVENT id=typewriter name=typewriter />
<ATTACH event=onload for=window handler=startTyping />
<method name=typeIt />
<property name=speed />
<script language="javascript">
// глобальные переменные
var counter=0;
var buffer1;
var buffer2;
var bufLength;
var typing;
if (!speed) {var speed=100}
// Установка буффера печати и инициализация печати.
function startTyping(){
buffer1 = element.innerText;
element.innerText="";
buffer2 = "";
bufLength = buffer1.length;
typing = window.setInterval(uniqueID+".typeIt()",speed);
}
// Печатем добавляя по одному символу к innerText каждый
// раз при новом интервале.
function typeIt(){
buffer2 = buffer2 + buffer1.substring(counter,counter+1);
element.innerText = buffer2;
counter = counter + 1;
if (counter == bufLength){clearInterval(typing)}
}
</script>
