Анимация заполнения изображения
В данном уроке мы разберем процесс создания эффекта заполнения изображения, который можно использовать в заставках или баннерах на сайте.
Часть 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/