;-)
  • Инвентарь
  • Техногрет
  • Андрейка Лечев Василий Мамаевский

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