Переливающийся текст

Переливающийся текст

Рубрика « Эффекты текста » | 7 комментариев

Текст переливается неоновым цветом слева направо и обратно.
Демо

Скрипт для файла header.php:

<SCRIPT language="JavaScript" type="text/javascript">

var ie4 = false;
if(document.all) {
ie4 = true;
}
function setContent(name, value) {
var d;
if (ie4) {
d = document.all[name];
} else {
d = document.getElementById(name);
}
d.innerHTML = value;
}

function getContent(name) {
var d;
if (ie4) {
d = document.all[name];
} else {
d = document.getElementById(name);
}
return d.innerHTML;
}

function setColor(name, value) {
var d;
if (ie4) {
d = document.all[name];
} else {
d = document.getElementById(name);
}
d.style.color = value;
}

function getColor(name) {
var d;
if (ie4) {
d = document.all[name];
} else {
d = document.getElementById(name);
}
return d.style.color;
}

function animate(name, col) {
var value = getContent(name);
if (value.indexOf('<span') >= 0) { return; }
var length = 0;
var str = '';
var ch;
var token = '';
var htmltag = false;
for (i = 0; i < value.length; i++) {
ch = value.substring(i, i+1);
if (i < value.length - 1) { nextch = value.substring(i+1, i+2); } else { nextch = ' '; }
token += ch;
if (ch == '<' && '/aAbBpPhHiIoOuUlLtT'.indexOf(nextch) >= 0) { htmltag = true; }
if (ch == '>' && htmltag) { htmltag = false; }
if (!htmltag && ch.charCodeAt(0) > 30 && ch != ' ' && ch != '\n') {
str += '<span id="' + name + '_' + length + '">' + token + '</span>';
token = '';
length++;
}
}
setContent(name, str);
command = 'animateloop(\'' + name + '\', ' + length + ', 0, 1, \'' + col + '\')';
setTimeout(command , 100);
}

function animateloop(name, length, ind, delta, col) {
var next = ind + delta;
if (next >= length) { delta = delta * -1; next = ind + delta; }
if (next < 0) { delta = delta * -1; next = ind + delta; }
setColor(name + '_' + ind, getColor(name + '_' + next));
setColor(name + '_' + next, col);
command = 'animateloop(\'' + name + '\', ' + length + ', ' + next + ', ' + delta + ', \'' + col + '\')';
setTimeout(command , 100);
}
</SCRIPT>

Где должна появиться надпись, вставьте скрипт:

<SPAN ID="animate"><B>Текст переливается</B></SPAN>
<SCRIPT language="JavaScript">
animate('animate', '#ff8000');
</SCRIPT>

7 комментариев к статье “Переливающийся текст

  • Доброго времени суток, Анжелика!Переливающийся текст, я так понимаю, будет при наборе слов?Я в таких тонких вопросах разбираюсь плоховастенько.Но с Натальей соглашусь, для поздравлений на блоге очень эффектно будут представлены пожелания для читателей.А можно наверное и рекламный текст выделить или ту часть текста к которой хочешь привлечь особое внимание читателя.Я же правильно понимаю?

    Reply
  • Здравствуйте!
    Очень, я считаю, подойдёт для праздничных вставок — есть же, скажем, поздравления (себя с годовщиной блогаhttp://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_good.gif) или обратить внимание на предстоящий праздник или событие. Так что очень даже пригодиться.http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif
    А то что у вас, Анжелика, стоит градиент цветов — так это просто находка. Зачем бродить в поисках, если у вас можно найти или подобрать нужный!!! Спасибо!http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_good.gif

    Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Добавить изображение

http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif