Недавно нашел интересный метод обесцветить, т.е. сделать черно-белым любой элемент на веб странице, будь то изображение, таблица, форма или что-либо еще.

Казалось бы, зачем это может понадобиться? Однако у меня сразу же появилась мысль о том, где такая возможность пригодиться. Довольно часто в моей практике встречались дизайны, в которых существовали элементы управления (различные кнопки, иконки) в двух видах – цветной, обозначающий что элемент активен, и серый, обозначающий что элемент не активен и нажимать на него не имеет смысла. Раньше я использовал два разных изображения – одно цветное, одно черно-белое, и если элемент деактивировался, то я подставлял нецветную картинку. Недостаток такого метода в том, что браузер должен подгружать дополнительную картинку, и хуже всего, что этих картинок может быть довольно много… Кроме того, нужно тратить время на то, чтобы создавать все эти нецветные изображения. При помощи предлагаемого здесь метода, обесцвечивание можно выполнить простой функцией grayscale().

Чтобы вам была более понятна суть, посмотрите мой демо пример. Однако здесь же замечу, что, хотя этот метод и тестировался в разных браузерах, все же пока это экспериментальное решение.

<< читать дальше >>

Месяц назад я писал статью о клиент-серверном скрипте Phototype, который позволяет работать с изображениями (изменять размер, создавать эффект наброска, отбрасывать тень и др.) с использованием JavaScript. Работает он следующим образом: на стороне клиента выполняется скрипт, в котором указываем путь к изображения и что нам нужно сделать с ним, в результате создается элемент <img>, который указывает на скрипт php, выполняющий необходимые преобразования с помощью библиотеки GD. Таким образом можно динамически создавать и изменять нужные нам изображения, управляя всем процессом из JavaScript.

На днях мне довелось использовать этот скрипт на практике и сразу же обнаружились некоторые недостатки, исправив которые я получил новый скрипт, которым и хочу поделиться с вами. Но сначала о недостатках старого скрипта. Первый недостаток это зависимость скрипта от библиотеки Prototype. Во многих случаях использование JavaScript фреймворков является плюсом, ибо значительно облегчает дальнейшую работу со скриптами, но не в этом случае, ибо скрипт использовал всего лишь пару возможностей Prototype, а именно создание класса Photo и создание элемента img. Подключать ради этого такую большую библиотеку просто неразумно. В моем случае на сайте использовалась библиотека Mootools, и подключать дополнительную Prototype я желания не имел, отчего и пришлось переработать скрипт. Второй недостаток, это отсутствие поддержки прозрачности для изображений. Если я использовал, к примеру, эффект вращения, то фон возле изображения обязательно заполнялся белым цветом. То же самое и при добавлении тени, где на фоне теней виднелся белый фон. То есть, такие эффекты скрипта, как вращение и отбрасывание тени, можно эффективно применять только на белом фоне, иначе получается совсем не то, что хотелось бы.

<< читать дальше >>

Phototype – интересный и вместе с тем простой клиент-серверный скрипт основанный на библиотеке Prototype для работы с изображениями, который может обрезать, поворачивать, добавлять тень к изображениям и др. Все эти манипуляции выполняются на сервере при помощи GD библиотеки для PHP. На стороне клиента работа с библиотекой выглядит так:

l_oPhoto = new Photo().load('image.jpg');
l_oPhoto.resize({width:200});
l_oPhoto.rotate(3);
l_oPhoto.dropShadow();
l_oPhoto.addCaption('Get ajaxorized!', '1942.ttf');
document.body.appendChild(l_oPhoto.fetch());

И результат выполнения этого кода:

Посмотреть больше примеров и скачать скрипт можно здесь.

Итак, наступает большой праздник “День победы”, одним из символов которого является конечно же праздничный салют. Как раз сегодня натолкнулся на скрипт fireworks.js, который позволяет добавлять яркие, красочные салюты на веб страницу.

Автор этого скрипта также является автором библиотеки SoundManager, для работы со звуком через JavaScript (о ней я недавно написал статью), поэтому не удивительно, что феерверк сопровождается замечательными звуковыми эффектами.

Основные возможности скрипта:

• Много разных вариаций формы и цвета феерверка
• Легкий в конфигурации API для добавления дополнительных эффектов
• Управляемые скриптом звуковые эффекты при помощи SoundManager API
• Чередующаяся анимация (позволяет легко устанавливать последовательность феерверков)
• Эффект звукового панорамирования, в зависимости от расположения салюта на странице.

Попробовать скрипт в работе можно здесь.

С праздником Вас, и до скорых встреч!

Морфинг, это визуальный эффект, позволяющий плавно преобразовать внешний вид одного элемента в другой. Это не самый распространенный эффект, но тем не менее иногда бывает очень кстати.

В Mootools, морфинг выполняется при помощи класса Fx.Morph, который имеет следующий синтаксис:

var myFx = new Fx.Morph(element[, options]);

Здесь, element – элемент, или его ID; options – дополнительные опции, как то скорость преобразования (duration) и его тип (transition).

Преобразование выполняется при помощи функции Morph.start(), которая принимает в качестве аргумента либо имя класса, либо объект со стилями, которые необходимо установить для объекта:

var myEffect = new Fx.Morph('myElement', {duration: 'short', transition: Fx.Transitions.Sine.easeOut});

myEffect.start({
    'height': 100,
    'width': 300
});

В этом примере, для скорости указан параметр “short”, что значит быстрый переход, для параметра transition установлено значение Sine.easeOut (подробнее о нем см. здесь). В функцию start() передан объект с двумя свойствами height и width, это значит что объект изменит размер с текущих значений высоты до 100 и 300 пикселей соответственно.

<< читать дальше >>