Андрейка Лечев написал скрипт, который раскрашивает текст цветным градиентом, и попросил оформить его в виде jQuery-плагина. Предлагаем этот плагин вашему вниманию:
— jquery.gradienttext.js;
— jquery.measurer.js.

В общих чертах

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

В случае если размер окна или шрифта изменяется, все цвета символов пересчитываются заново. Чтобы обновить цвета принудительно, воспользуйтесь методом плагина update() (подробнее об этом — в конце статьи).

Простой пример

Подключаем библиотеку jQuery, файлы jquery.measurer.js и jquery.gradienttext.js.

01 
02 
03 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.measurer.js"></script>
<script type="text/javascript" src="jquery.gradienttext.js"></script>

Попробуем вызвать плагин без явных параметров.

01 
02 
03 

$(document).ready(function(){
    $('#example1 h3, #example1 span').gradientText();
});

Указываем цвета

От голубого к красному, а затем к зеленому.

01 
02 
03 
04 
05 

$(document).ready(function(){
    $('#example2 h3, #example2 span').gradientText({
        colors: ['#00CCFF', '#FF0000', '#00CC00']
    });
});

Выбираем, какие элементы внутри обрабатывать, а какие нет

По умолчанию вложенные элементы не обрабатываются, но если при инициализации указать jQuery-селекторы в свойстве toProcess, то указанные элементы будут обработаны наряду с родителями.

01 
02 
03 
04 
05 
06 

$(document).ready(function(){
    $('#example3 h3, #example3 span').gradientText({
        colors: ['#ff0000', '#000000'],
        toProcess: ['a']
    });
});

Несколько особенностей, о которых стоит знать

У плагина всего два параметра:
— colors — массив цветов в шестнадцатиричном формате;
— toProcess — массив jQuery-селекторов; соответствующие им вложенные элементы будут обработаны наравне с родителем (по умолчанию, напомним, вложенные элементы не обрабатываются).

Для раскрашенных элементов цвет ссылки при наведении мыши нужно указывать дополнительно. Вот так:

01 
02 
03 

a:hover .gr-letter { 
    color: #FF0000 !important; 
}

Принудительно обновить цвета можно, воспользовавшись методом update():

01 
02 

var api = $('#example1 h3').data('gradientText');
api.update();

Наименьшая ширина градиента — 200 пикселей, т. е. если ширина строки меньше 200 пикселей, то могут быть задействованы не все цвета.

Если вы хотите изменить настройки по умолчанию, есть метод $.gradientTextSetup(), которому нужно передать те же параметры, что и плагину. Например:

01 
02 
03 

$.gradientTextSetup({
    colors: ['#DDDD00', '#FF0000']
});

Файл jquery.measurer.js содержит глобальный объект $measurer, который позволяет отслеживать изменение размера шрифта на странице. Его использование не обязательно.