В сегодняшнем уроке мы создадим интересный эффект, который будет напоминать съемку фотоаппаратом.

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

Этот плагин способен превратить любой слой на странице в специальное поле с возможностью делать фотографии :).

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

Проблема 1 - размывание изображения

Javascript напрямую не поддерживает размывание изображений.

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

Проблема 2 - спрятать курсор

CSS не предоставляет способ спрятать курсор. Но можно заменить его вид с помощью файла .cur и правила css:url(). Эти файлы поддерживают прозрачность, то есть Вам необходимо сделать абсолютно прозрачный курсор и присвоить его к площади (в которой Вы хотите спрятаь курсор).

К сожалению, у ХРОМА могут возникнуть небольшие проблемы отображения. В опере также не все гладко.

Давайте приступим к созданию...

Шаг 1 - XHTML

Поскольку большинство работы выполняет плагин, наша работа сводится к тому, чтобы предоставить слой для трансформации.

demo.html

<div id="main">

<!-- плагин вставляет сгенерированный код сюда -->

</div>

Вы можете разместить этой слой где-угодно на странице. Вам необходимо задать фиксированную высоту и ширину в таблице стилей для правильной работы. После загрузки страницы и инициализации плагина вставляется дополнительный код:

demo.html

<div id="main">

<div class="blur" style="......"></div>
<div class="blur" style="......"></div>
<!--  8 дополнительных слоев -->

<div class="overlay" style="opacity: 0.2;"></div>

<div style="......" class="viewFinder">
<img src="photoShoot/viewfinder.png" width="300" height="200">
</div>

</div>

Тут уже многое изменилось. Как уже упоминалось выше, эффект размытия достигается путем наложения нескольких слоев друг на друга.

Также у нас есть "объектив", который следует за движением мышки.

При нажатии на любом месте изображения будет выполняться специальная пользовательская функция. В нашем случае будет делаться небольшой скриншот и изображение будет отображаться в нижнем правом углу.

Шаг 2 - CSS

У плагина есть собственная таблица стилей. Ее мы трогать не будем. Нам понадобятся стили только для оформления страницы.

styles.css

#main{
	margin:0 auto;
	width:960px;
	height:600px;
}

.shot{

	border:3px solid #FCFCFC;
	float:right;
	position:relative;
	margin-left:10px;
	overflow:hidden;

	/* Добавление CSS3 тени под снимками: */

	-moz-box-shadow:0 0 2px black;
	-webkit-box-shadow:0 0 2px black;
	box-shadow:0 0 2px black;
}

.shot img{
	display:block;
}

.album{
	/* Этот div содержит снимки */
	bottom:50px;
	height:110px;
	overflow:hidden;
	position:absolute;
	right:20px;
	width:490px;
}

.album .slide{
	width:700px;
	height:110px;
	position:relative;
	left:-210px;
}

Каждый снимок динамически вставляется с помощью нашей пользовательской функции shoot при нажатии мышки. Слои album и slide добавляются динамически с помощью jQuery скрипта.

Шаг 3 - jQuery

Сам код плагина здесь не будет обсуждаться, так как о нем будет дополнительный урок. Однако, нам понадобится дополнительный jQuery код, который:

- вставляет .album в слой #main
- выбирает случайное flickr изображение из массива для обработки плагином
- создает объект настроек
- определяет пользовательскую функцию shot которая вызывается при нажатии мышкой
- вызывает плагин с помощью метода photoshoot()

script.js

$(document).ready(function(){

	// Код выполняется после загрузки

	var main = $('#main');

	// Задаем ширину photoshoot площади на
	// 1024 px или ширину документа - смотря что меньше:

	main.width(Math.min(1024,$(document).width()));

	// Создаем массив с 4-мя возможными фонами и их размерами:
	var pics = new Array(
				{ url:'http://farm4.static.flickr.com/3595/3405361333_77f2a5e731_b.jpg', size:{x:1024,y:677}},
				{ url:'http://farm4.static.flickr.com/3028/2753126743_4249a4e948_b.jpg', size:{x:1024,y:768}},
				{ url:'http://farm4.static.flickr.com/3641/3595250019_5a1237899a_b.jpg', size:{x:1024,y:768}},
				{ url:'http://farm3.static.flickr.com/2592/4018062274_1f7f23597d_o.jpg', size:{x:1158,y:756}}
	);

	// Выбираем случайную фотку для передачи в плагин:
	var bg = pics[parseInt(Math.random()*4)];

	// Создаем объект настроек (попробуйте менять эти переменные):
	var opts = {
		image		:	bg.url,
		onClick		:	shoot,
		opacity		:	0.8,
		blurLevel	:	4
	}

	// Вызываем плагин photoShoot и превращаем слой #main в съемочную площадку:
	main.photoShoot(opts);

	// Добавляем место для снимков:
	$('<div class="album">').html('<div class="slide" />').appendTo(main);

	// Наша функция съемки:
	function shoot(position){
		// Функция вызывается плагином при нажатии мышки

		// Создание эффекта вспышки:
		main.find('.overlay').css('background-color','white');

		// Вспышка продлится 100 милисекунд:
		setTimeout(function(){main.find('.overlay').css('background-color','')},100);

		// Создаем новый снимок
		var newShot = $('<div class="shot">').width(150).height(100);
		newShot.append( $('<img src="'+bg.url+'" width="'+(bg.size.x/2)+'" height="'+(bg.size.y/2)+'" />').css('margin',-position.top*0.5+'px 0 0 -'+position.left*0.5+'px') );

		// Убираем 4-й снимок:
		$('.shot').eq(3).remove();

		newShot.css('margin-right',-160).prependTo('.album .slide').animate({marginRight:0},'slow');
	}
});

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

Также важно убирать каждый 4-й снимок с помощью remove(), чтобы не нагружать скрипт ненужными элементами.

Вот и все готово!

Сферу применения этого чуда придумать очень трудно, но для общего развития подойдет.