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

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

Теперь вкратце опишу принцип работы этого метода.

Хоть я частенько и ругаю IE за его огрехи, но в этом случае он справляется лучше всех, ибо в Internet Explorer существует специальный фильтр который позволяет сделать такое преобразование цвета:

elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)';

Фильтр может быть установлени и в CSS:

elem {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    /* Элемент должен иметь "hasLayout"! */
    zoom: 1;
}

Что касается остальных браузеров, то здесь все гораздо сложнее. Во первых обесцвечивание обычных элементов – параграфов, таблиц и т.п. В этом случае нужно просматривать значения “цветных” стилей: color, background-color, и изменять их цвет следующими фукнциями:

// Уменьшение насыщенности
function RGBtoDesat(r,g,b) {
    var average = (r + g + b) / 3;
    return {
        r: average,
        g: average,
        b: average
    };
}

// Преобразование в черно-белый цвет
function RGBtoGrayscale(r,g,b) {
    var mono = parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );
    return {
        r: mono,
        g: mono,
        b: mono
    };
}

Для обесцвечивания изображений используется другая технология – элемент <canvas> и его метод getImageData(), но при этом изображение должно находиться на том же домене, что и веб страница. По всей видимости метод getImageData() не поддерживается в Chrome и Safari меньше четвертой версии, поэтому для этих браузеров такой метод работать не будет.

Использование

Чтобы выполнить обесцвечивание, нужно вызвать функцию grayscale(), передав в качестве параметра элемент или коллекцию элементов:

// один элемент
var el = document.getElementById( 'myEl' );
grayscale( el );

// Массив элементов DOM
grayscale( document.getElementsByTagName('div') );

// Также работает с коллекциями jQuery
grayscale( $('div') );

Чтобы вернуть элемент в первоначальное, цветное, состояние, нужно воспользоваться функцией grayscale.reset():

grayscale.reset( el );
grayscale.reset( $('div') );

При всем этом, я бы не советовал вам использовать такую методику для больших изображений, так как их использование в элементе canvas может поглотить много ресурсов, даже если вы используете предлагаемую автором фунцкию grayscale.prepare() работы с такими изображениями.

Больше информации можете узнать на здесь. Там же можно скачать скрипт и посмотреть демо пример автора.

Смотреть демо

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

Теперь о том, что же я исправил в скрипте. Во первых полное избавление от зависимости со стороны Prototype. Во вторых добавлена поддержка прозрачности и возможность устанавливать цвет фона при помощи функции setBgColor():

var img = new Photo().load('image.jpg').addCaption('Hello').setBgColor(255,255,255,10);
document.getElementById('e10').appendChild(img.fetch());

Первые три параметра функции setBgColor() – это значения для красного, зеленого, и синего цветов (0 – 255), а последний, четвертый параметр – это значение прозрачности (0 – 127).

В третьих, добавлена возможность добавлять дополнительное изображение поверх основного. Верней сказать, не добавлена а исправлена такая возможность, ибо в старой версии существовала функция addChuckNorris(), которая добавляла гордый профиль Чака Норриса поверх изображений (автор либо его поклонник либо просто шутник ). Я эту функцию преобразовал в addForeImage():

var img = new Photo().load('photo.png').addForeImage('chuck.png');
document.getElementById('e2').appendChild(img.fetch());

В качестве параметра она принимает имя файла JPEG или PNG, который должен быть в папке images. Скрипт автоматически изменяет размер изображение и помещает поверх основного в крайнем левом углу (возможность управлять размерами и положением этого изображения будет полем деятельности при разработке следующей версии).

В четвертых, добавлена возможность работать не только с файлами JPG , но и с файлами PNG, что при возможностях последнего делает скрипт значительно более полезным.

Ну и последнее, в моем скрипте можно устанавливать путь к библиотеке при помощи функции setImgPath(). То есть, если вы поместили библиотеку в /demo/phototype , то для правильного отображения нужно вызывать функцию следующим образом:

var img = new Photo().setImgPath('/demo/phototype');

В старом скрипте путь указывался относительным, т.е. изображения имели атрибут src=”image.php?…..”, и если скрипт располагался где-то во вложенных папках, то браузер просто не находил его.

На этом все мои усовершенствования и заканчиваются, хотя поле деятельности здесь потенциально очень большой и ограничивается лишь возможностями библиотеки GD. Есть также идею заюзать какую-нибудь библиотеку вроде Aside, которая может делать и ресайз и водяные знаки и многое другое. Может из этого что-нибудь и получится.

скачатьсмотреть демо

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());

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

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

Автор этого скрипта также является автором библиотеки 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 пикселей соответственно.

Теперь обратите внимание на следующий, немного измененный пример:

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

myEffect.start({
    'height': [10, 100],
    'width': [900, 300]
});

Отличается он тем, что для параметров “height” и “width” установлены начальные значения высоты и ширины, т.е. высота увеличится с 10 до 100, а ширина уменьшится с 900 до 300 пикселей.

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

Шаг 1: HTML

<a href="#" class="switch-view" rel="view1">View 1</a><br/>
<a href="#" class="switch-view" rel="view2">View 2</a><br/>
<a href="#" class="switch-view" rel="view3">View 3</a><br/>

<div class="view1" id="content-block"></div>

Тут все просто, собственно ссылки и div, стиль которого и будем изменять. Для ссылок указываем имя класса switch-view, для того, чтобы можно было добавить к ним обработчик onclick, а в атрибут rel добавляем имя класса, который нужно присвоить div-у.

Шаг 2: CSS

.view1{
	border:2px solid #fc0;
	color:#000;
	background:#fffea1;
	padding:5px;
	width:400px;
	height:200px;
}
.view2{
	border:9px solid #00f;
	color:#090;
	background:#fcfa56;
	padding:12px;
	width:700px;
	height:400px;
}
.view3{
	border:5px solid #000;
	color:#fff;
	background:#f00;
	padding:10px;
	width:600px;
	height:50px;
}

Это три стиля, которые будут присваиваться div-у.

Шаг 3: JavaScript код

window.addEvent('domready', function() {
	$$('.switch-view').each(function(el) {
		//добавляем обработчик onclick для ссылок
		el.addEvent('click', function(e) {
			var myFx = new Fx.Morph('content-block', {
					duration: 500,
					transition: Fx.Transitions.Sine.easeOut
				});
			myFx.start('.' + el.get('rel'));
		});
	});
});

Принцип работы кода таков – сначала получаем все ссылки с классом switch-view, затем к каждой из них добавляем обработчик, в теле которого объявляется новый объект класса Fx.Morph и сразу же вызывается функция start() для начала преобразований. Имя класса для преобразования получаем при помощи выражения el.get(’rel’).

смотреть демозагрузить пример

Если вы используете библиотеку Prototype, то рекомендую посмотреть статью "использование эффекта морфинга" о том, как можно создать такой же эффект при помощи этой библиотеки.