Сейчас: 15:30:19   29-го марта 2024 г.
121
384

Текст, переливающийся разными цветами

В данное время обычным разноцветным текстом пользователей уже не удивишь. Для того чтобы сделать что-то анимированное, необходимы знания и требует много времени на обучение.


Предлагаем Вам не сложный JavaScript код, который позволит Вам сделать текст, переливающийся различными цветами.


Например, вот такой заголовок будет намного ярче и веселей обычного цветного текста:


Для получения точно такого же текста, переливающегося различными цветами, как и в примере, показанном выше, воспользуйтесь JavaScript кодом, приведенным ниже (просто скопируйте его на свой сайт):

JavaScript код:
<script type="text/javascript">
var 
message "Текст, переливающийся разными цветами";
var 
base_color "#D50000";
var 
style "text-align: center; color:' + base_color + '; font-size: 34px;";
var 
color1 "magenta";
var 
color2 "green";
var 
flashspeed 99;
var 
flashingletters 2;
var 
flashingletters2 2;
var 
flashpause 0;
var 
0;
if (
document.all||document.getElementById){
   
document.write('<div style="'+style+'">')
   for (
m=0m<message.lengthm++)
   
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
   
document.write('</div>')
}
else 
document.write(message)

function 
crossref(number){
   var 
crossobj=document.all? eval("document.all.neonlight"+number) :
   
document.getElementById("neonlight"+number)
   return 
crossobj
}

function 
neon(){
   if (
n==0){
    for (
m=0m<message.lengthm++)
    
crossref(m).style.color=base_color
    
}
   
crossref(n).style.color=color1
   
if (n>flashingletters-1) { crossref(n-flashingletters).style.color=color2 }
   if (
n>(flashingletters+flashingletters2)-1) {
   
crossref(n-flashingletters-flashingletters2).style.color=base_color }
   if (
n<message.length-1) { n++ }
   else{
    
n=0
    clearInterval
(flashing)
    
setTimeout("start_color()",flashpause)
    return
    }
}
function 
start_color(){
   if (
document.all||document.getElementById)
   
flashing=setInterval("neon()",flashspeed)
}
start_color()
</script>

Как видите, ничего сложного в данном JavaScript коде нет, несмотря на кажущийся большой размер JavaScript кода. Зато какой красивый переливающийся текст при его помощи можно сделать и порадовать своих посетителей.

Дата создания: 20:59:36 20.06.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений: 19905 раз(а).

Комментарии посетителей (7 шт.):
Sergey1917
0
# 760
(19:17:29  06.04.2013 г.)

А название сайта в теме Друпал можно подключить к этому скрипту?
Ответить

Administrator
0
# 764
(21:49:41  06.04.2013 г.)

Точно не знаю, но попробовать всегда можно.
Вот создал отдельную тему на форуме, где код разбит на две части для удобства добавления его на сайт - Немного измененный скрипт текста, переливающегося разными цветами.
Ответить

Артур
0
# 782
(14:04:21  09.04.2013 г.)

А как через div в html подключить?
Ответить

Administrator
1
# 784
(22:07:44  09.04.2013 г.)

Чуть выше я уже давал ссылку на наш форум - http://usefulscript.ru/forum/showthread.php?tid=194, там показано, как можно добавить через span (легко заменить на div).
Ответить

Полина
0
# 3789
(21:45:40  14.03.2017 г.)

Подскажите, пожалуйста, как сделать интервал между проходами? У меня получилось посредством увеличения значения var flashpause=0 но при изменении этого параметра блик останавливается в конце.
Ответить

Татьяна
0
# 4335
(22:51:22  20.08.2018 г.)

Доброе время суток, подскажите пожалуйста, что нужно поправить в коде чтобы скрипт работал для всех тегов <span id="text"></span>. У меня их шесть на одной странице (заголовки) и работает только один, а остальные нет... Как сделать, чтобы и другие работали.
Не прописывать же всем разный id? Или прописывать, но тогда и в скрипте нужно изменения делать...

Буду благодарна за ваш ответ.
Ответить

Татьяна
0
# 4336
(15:39:55  21.08.2018 г.)

Здравствуйте, ваш скрипт, делает выборку одного элемента по id, а необходимо для всех элементов на странице...

Имеется строчка:
Заголовок 1
Заголовок 2
Заголовок 3
... и т.д.

Этот скрипт срабатывает только для заголовка 1, что логично, так как происходит выборка одного элемента. Как сделать, чтобы данный скрипт работал для всех заголовков. Сама пробовала реализовать, но получается коряво. Может стоит через getElementsByClassName, но что-то не вышло…

Заранее благодарна.
Ответить

Закрыть
Ваше имя:
740 + 2 =
Добавить комментарий:
Ваше имя:
740 + 2 =

Перед публикацией все комментарии проходят обязательную модерацию!

Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
Посетителей онлайн: 4

Какие темы необходимо добавлять на сайт?