Градиенты для текста

HTML и CSSXSLTJavaScriptИзображенияСофтEtc
Андрейка Лечев Василий Мамаевский

17 декабря 2010


Задача.

Раскрасить текст цветным градиентом.

Андрейка Лечев написал скрипт, который раскрашивает текст цветным градиентом, и попросил оформить его в виде 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']
    });
});

Незнакомцы в поезде +31

Фильм «Я исповедуюсь» снят в 1953 г.

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

У плагина всего два параметра:
— 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, который позволяет отслеживать изменение размера шрифта на странице. Его использование не обязательно.