Градиент заливки текста с помощью JavaScript

JavaScript | 11.10.2009 | Метки: | 2 Комментария

Существует несколько способов создания градиента (градиентной заливки) для текста.
Но некоторые из них позволяют создать только вертикальный градиент а некоторые требуют использования картинки (например прозрачного png).

Мы же пойдем другим путем, а именно используем готовые функции для раскрашивания текста: одну более применимую для «точечных ударов» и вторую для использования в повторяющихся кусках текста (например в заголовках).

1. Используем следующую функцию:

<SCRIPT language=JavaScript>
// ------------------ Gradient Output --------------------
// Syntax for use:
// gradient(TEXT_STRING_HERE,HEXCODES_STRING_HERE);
// lookup table
 
var tohex = new Array(256);
var hex = "0123456789ABCDEF";
var count = 0;
for (x=0; x<16; x++) {
 for (y=0; y<16; y++) {
 tohex[count] = hex.charAt(x) + hex.charAt(y);
 count++;
 }
}
 
//ColorCode constructor
function ColorCode(hexcode) {
  if (hexcode.length == 7) {
    this.r = parseInt(hexcode.substring(1,3),16);
    this.g = parseInt(hexcode.substring(3,5),16);
    this.b = parseInt(hexcode.substring(5,7),16);
  }
  else if (hexcode.length == 6) {
    this.r = parseInt(hexcode.substring(0,2),16);
    this.g = parseInt(hexcode.substring(2,4),16);
    this.b = parseInt(hexcode.substring(4,6),16);
  }
  else {
    this.r = this.g = this.b = 0;
    alert("Error: ColorCode constructor failed");
  }
  if (isNaN(this.r)||isNaN(this.g)||isNaN(this.b))
    alert("Error: ColorCode constructor failed");
}
 
// ColorList constructor
function ColorList(hexcodes) {
  var i = 0;
  var c = 0;
  this.codes = new Array(Math.round(hexcodes.length/7));
  while (i < hexcodes.length) {
    if (isNaN(parseInt(hexcodes.substring(i,i+6),16))) ++i;
    else {
      this.codes[c] = new ColorCode(hexcodes.substring(i,i+6));
      i += 7;
      ++c;
    }
  }
  this.len = c;
}
 
function interpolate (x1, y1, x3, y3, x2) {
  if (x3 == x1) return y1
  else return (x2-x1)*(y3-y1)/(x3-x1) + y1
}
 
// x=index of letter, y=number of letters, z=number of colors
function lowcolorindex (x, y, z) {
  if (y == 1) return 0
  else return Math.floor( (x*(z-1))/(y-1) )
}
 
function hicolorindex (x, y, z, low) { 
  if ( low*(y-1) == x*(z-1) ) return low
  else if (y == 1) return 0
  else return Math.floor( (x*(z-1))/(y-1) + 1 )
}
 
function gradient (thetext,thecolors) {
    var colors = new ColorList(thecolors);
    var numcolors = colors.len;
    var numchars = thetext.length;
    var rr = 0;
    var gg = 0;
    var bb = 0;
    var lci = 0; //lower color index
    var hci = 0; //high color index
    for (i=0; i<numchars; ++i) {
      lci = lowcolorindex(i, numchars, numcolors);
      hci = hicolorindex(i, numchars, numcolors, lci);
      rr = Math.round(interpolate( lci/(numcolors-1), colors.codes[lci].r, hci/(numcolors-1), colors.codes[hci].r, i/(numchars-1)));
      gg = Math.round(interpolate( lci/(numcolors-1), colors.codes[lci].g, hci/(numcolors-1), colors.codes[hci].g, i/(numchars-1)));
      bb = Math.round(interpolate( lci/(numcolors-1), colors.codes[lci].b, hci/(numcolors-1), colors.codes[hci].b, i/(numchars-1)));
      document.write(thetext.charAt(i).fontcolor('#' + tohex[rr]+tohex[gg]+tohex[bb])); // вот тут кстати решетки не было и в огнелисе было косячно
    }
  }
</script>

Из этого довольно часто встречающегося в сети примера убраны проверки на браузер и прочая чушь.
Таким образом если вам на какой-либо странице потребуется разукрасить кусок текста, просто вставьте следущий код в любое место сайта:

<SCRIPT language=JavaScript>
gradient("wmdn.ru - сборник трюков для веб-мастера!","FF0000 FFFFFF 0000FF");
document.write('<BR>');
gradient("На wmdn.ru вы найдете все чтобы не скучать при создании сайтов.","444444 DDDDDD 444444");
</SCRIPT>

Пример в целом рабочий, но старый, поэтому рассмотрим второй, более короткий и универсальный вариант.

2. Кусок кода мне попался без каких-либо копирайтов, поэтому если будут вопросы можно задавать мне в комментах:

<script type="text/javascript">
var r = [216, 177];
var g = [108, 183];
var b = [174, 245];
var pageTitle;
 
function colorizeTitle(){
		pageTitle = document.getElementsByTagName('h1').item(0);
		makeColor(pageTitle);
}
 
function getColor(v, m, l)
{
	return(m[1] - Math.round((m[1]-m[0])/l * (l-v)));
}
 
function makeColor(t){
	var c = t.innerHTML;
	document.write(c);
	var l = c.length;
	var text = '';
	for(var i = 0; i < l ;i++){
		cs = c.substring(i, i+1);
		if(cs == " "){
			text += " ";
			i++;
			cs = c.substring(i, i+1);
		}
		if(cs == "<"){
			chk = 0;
			while(chk == 0){
				cs = c.substring(i, i+1);
				text += cs;
				i++;
				if(cs == ">") chk = 1;
				if(c.substring(i, i+1) == "<") chk = 0;
			}
			cs = c.substring(i, i+1);
		}
		if(cs == "&"){
			while(cs != ";"){
				cs = c.substring(i, i+1);
				text += cs;
				i++;
			}
			cs = c.substring(i, i+1);
		}
		cr = getColor(i, r, l);
		cg = getColor(i, g, l);
		cb = getColor(i, b, l);
		text += "<u style='color: rgb("+cr+","+cg+","+cb+")'>"+cs+"</u>";
	}
	t.innerHTML = text;
}
colorizeTitle();
</script>

В частности этот код разукрасит один заголовок H1.
Если же функцию colorizeTitle() немного переписать (добавить цикл for), то все встречающиеся на странице заголовки H1:

function colorizeTitle(){
		pageTitle = document.getElementsByTagName('h1');
		for(var x=0; x < pageTitle.length; x++){
		makeColor(pageTitle[x]);
		}	
}

Комментариев: 2

  • 22.05.2012 Владислав:
    Ответить

    Здравствуйте!

    Спасибо за статью, очень понравилась, но возник такой вопрос:

    при использовании первого скрипта FireFox и Chrome ругаются и скрипт выполняется криво. Я так понял из-за того что цвета они передают в РГБ. Есть какая нибудь заплатка или решение данной проблемы?

    • 22.05.2012 Кирилл:
      Ответить

      Ага пожалуйста :) а как ФФ и Хром ругаются? И как криво выполняется?

      Насколько я помню у меня оба варианта без багов работали.


Добавление комментария:
 css.php