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

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

Переливающийся текст разными цветами для веб сайта

Пример

Как сделать переливающийся текст

Чтобы установить переливающийся текст, слова, буквы на сайт следуйте инструкции.

1. Создайте отдельный файл например text.js и вставьте в него код JavaScript приведенный ниже ↷


var base_color="#110A53"
var color1="red"
var color2="green"
var flashspeed=120
var flashingletters=2
var flashingletters2=2
var flashpause=0
var n=0
var color_text=""
message=document.getElementById("text").innerHTML;
if (document.all||document.getElementById){
    color_text='<div align="center"><font color="'+base_color+'" size="4">';
    for (m=0; m<message.length; m++) color_text+='<span id="neonlight'+m+'">'+message.charAt(m)+'</span>'
    color_text+='</font></div>'
    document.getElementById("text").innerHTML = color_text
}
else document.getElementById("text").innerHTML = 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=0;m<message.length;m++)
     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()

2. В том месте где должен быть переливающийся текст должен стоять HTML код с текстом ↷

<span id="text">Cделать переливающийся текст онлайн</span>

3. Подключаем JavaScript text.js и ставим его где-нибудь в конце странички.

4. А вот так все должно быть. ↷

<html>
<head></head>
<body>

<span id="text">Ваш переливающийся текст</span>

<script type="text/javascript" src="text.js"></script>
</body>
</html>

5. Пояснения к скрипту переливающийся текст (Настройка) ↷

var base_color="#110A53" - основной, статичный, цвет текста;
var color1="red"   - первый цвет;
var color2="green" - второй цвет;
var flashspeed=120 - скорость передвижения;
size="4"   - размер текста.

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

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