Как стать автором
Обновить

Вышел плагин jQuery Color версии 2 бета 1

Время на прочтение 2 мин
Количество просмотров 4.9K
Автор оригинала: Corey Frang
Ранее, в 2007 году, мы выпустили jQuery Color Plugin, и той поры он обеспечивал для вас возможности анимации цвета. Сейчас мы подготавливаем вторую версию этого плагина, в которой добавится API, RGBA, HSLA и ряд других возможностей. Настало время бета-версии! Репозиторий этого плагина находится по адресу github.com/jquery/jquery-color. А на code.jquery.com также доступны две версии плагина — несжатая и сжатая минификатором.

Обзор новых возможностей

RGBA


Теперь мы поддерживаем формат RGBA у значений цвета. В тех браузерах, которые RGBA не поддерживают, ближайшее к элементу значение backgroundColor станет использоваться при вычислении промежуточной аппроксимации цвета. Хотя это не «настоящая» альфа-прозрачность, этот способ, по меньшей мере, обеспечит иллюзию альфы при взаимодействии с одноцветным фоном. Вот как выглядят браузеры Opera 10, Chrome 10, Firefox 3.6 и IE 6, когда в них запущен вон тот демонстрационный пример альфа-наложения:

[Opera 10, Chrome 10, Firefox 3.6 и IE 6 демонстрируют альфа-наложение]

HSLA


Также мы теперь поддерживаем указание HSLA-значений цвета во всех браузерах, за исключением альфы, в поддержке которой применяем вышеописанные техники.

API, удобный в употреблении


Вместо простой группы приватных методов-утилит теперь используется вызов $.Color(), создающий новый объект Color. Новый объект Color можно проинициализировать несколькими различными способами: именем цвета, шестнадцатиричным кодом цвета, CSS-подобным значением RGBA или HSLA, массивом RGBA-значений или объектом с цветовым компонентом. Теперь есть и методы-помощники для каждого из цветовых компонентов, наподобие .red() и .hue(), позволяющие считать или задать его значение. В сочетании с функциями-помощниками (например, .toRgbString(), .transition() и .is()), объект $.Color отныне способен обеспечить все ваши цветовые нужды. Глядите README по адресу github.com/jquery/jquery-color там обзор всех вновь появившихся функций. Теперь jQuery.Color пригоден не только для анимации простых цветов: его API вы можете отныне использовать для сложных цветовых вычислений и анимаций!

Немедленные примеры:
// создание объекта Color красного цвета:
var red = $.Color( 'rgba(255,0,0,1)' ); // используется CSS-строка

// Создание красного объекта Color с преобразованием в оранжевый:
var orange = $.Color( '#FF0000' ).green( 153 );

// Создание цвета посередине между красным и синим:
var between = $.Color([ 255, 0, 0 ]).transition( "blue", 0.5 );


Частичная анимация цвета


Мы добавили возможность задать только одну или две компоненты цвета, так что вы можете анимировать цвет частично (вот пример):
// плавно убираем цветность фона этого элемента
elem.animate({
    backgroundColor: $.Color({ saturation: 0 })
}, 1000);


Сообщения об ошибках, предложения новых возможностей


Если хотите сообщить о каких-либо проблемах с новым цветовым плагином, или если желаете предложить новую возможность, обращайтесь на github.

Также нам хотелось бы посмотреть и всем показать какие-нибудь превосходные примеры новой беты $.Color, так что, пожалуйста, поделитесь ими с нами в комментариях.
Теги:
Хабы:
+33
Комментарии 11
Комментарии Комментарии 11

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн