Анимация заполнения изображения

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

Часть PHOTOSHOP - подготовка изображений

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

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

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

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

В ФОТОШОП нужно выделить базовое изображение и затем сделать инверсию выделения. Выделенная область будет рамкой, цвет которой можно установить по желанию. Чтобы добавить контур шириной 10px вокруг базового изображения, как в демонстрации, нужно модифицировать выделение базового изображения, расширив его на нужную величину. При работе с изображениями нужно следить за тем, чтобы размер холст был достаточным для размещения всех изображений.

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


CSS

Код снабжен комментариями, которые описывают назначение свойств.

*{
	  margin:0;
	  padding:0;
	}
	body {
	  text-align: center;
	  background: #A4CAEF;
	  text-align: center;
	  padding: 20px;
	}
	/*Контейнер для рамки изображения*/
	.frame{
	  position: absolute;
	  z-index: 2;
	}
	/*Контейнер для изображения*/
	#dude{
	  height: 575px;
	  width: 300px;
	  margin: 0px auto;
	}
	/*Добавляет отступ вокруг изображения для создания рамки. Нужно только для формата png.*/
	img.loadpic{
	  margin: 10px;
	}
	/*Предохраняет от расширения при подъеме среднего слоя*/
	#dudecontainer{
	  position: relative;
	  overflow: hidden;
	  height: 575px;
	  width: 300px;
	  background: #FFF;
	}
	/*Средний слой, который скрывает изображение вначале*/
	#dudeoverlay{
	  position: absolute;
	  z-index: 1;
	}
	/*Белый div в #dudeoverlay, который заполняет пространство за пределами изображения*/
	#dudeblock{
	 height: 625px;
	 width: 300px;
	 background: #FFF;
	}
	/*Изображение, которое добавляет эффект заполнения, в данном случаем - скос*/
	#dudeedge{
	 height: 90px;
	 width: 300px;
	 background: url('slash.png');
	}

HTML

Код достаточно простой, только нужно помнить об иерархии.

Query

$(document).ready(function() {
	 $("#dudeoverlay").stop().animate({top:'-665px'},{queue:false,duration:3500} );
	});

Вот и весь код. В зависимости от размеров изображения можно изменять атрибут top, так как перекрывающий слой надо смещать за пределы изображения. Отрицательное значение поднимает маскирующий слой, положительное - опускает. Также можно подогнать длительность эффекта.


Заключение

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

Источник урока: buildinternet.com/2009/06/animate-image-filling-up-using-jquery/