Делаем эффект фотокамеры с помощью CSS и jQuery

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

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

3

Проблема 1 – размытие изображения

JavaScript не поддерживает непосредственного размытия изображения. Например, нет такой функции какdocument.getElemetById(‘image’).style.blur=2, как бы она ни была удобна.

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

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

Проблема 2 – Скрытие курсора

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

К сожалению, Google Chrome плохо воспринимает полностью пустые курсоры, и для него должна быть специальная версия файла .cur, которая будет содержать один белый пиксель (использовать такое решение лучше, чем никакого не иметь).

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

Проблема 3 – Нет поддержки масок

Решение данной проблемы заключается в использовании свойства background элемента div видоискателя для вывода оригинального изображения. Задавая отрицательные значения для верхнего и левого смещения изображения и обновляя их при каждом смещении курсора мыши, мы создаем для пользователя иллюзию, что видоискатель проясняет размытую картину под ним.

Решение данной проблемы встроено в плагин, который берет на себя много рутинной работы.

Шаг 1 – XHTML

Так как много рутинной работы выполняет плагин jQuery PhotoShoot, то нам остается только обеспечитьdiv, который будет трансформироваться в окно для снимков (нужно будет передать объект конфигурации, который будет содержать указание на выводимое изображение и несколько других опций).

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

demo.html

 

Все изменения показаны на выше приведенном примере. Как упоминалось ранее эффект размытия достигается укладыванием прозрачных элементов div один поверх другого – элементы с классом blur. Затем следует div overlay, который затемняет слои, лежащие под ним в соответствии с установками прозрачности,  переданной в плагин.

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

Для обеспечения максимальной гибкости плагин обеспечивает способ выполнения пользовательской функции для обработки события click. Мы используем эту возможность для имитации работы камеры и вставки снимка в div album, что не является частью плагина.

Шаг 2 – CSS

Плагин имеет свою собственную таблицу стилей (photoShoot/jquery.photoShoot-1.0.css в наборе исходников), которая определяет внешний вид компонентов, таким образом нам надо задать стили для остальной страницы.

styles.css

 

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

Элементы div album и slide  добавляются нашим скриптом jQuery (а не плагином). Принцип действия заключается в том, что элемент div slide больше, чем его родительский элемент div album, и новый снимок проскальзывает влево, когда вставляется.

Шаг 3 – jQuery

В данном уроке не объясняется устройство плагина photoShoot. Но для нашего примера мы должны добавить код jQuery, который:

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

script.js

 

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

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

Заключение

В данном уроке продемонстрировано построение эффекта фотокамеры с использованием плагина jQuery и CSS. Для эффекта можно придумать много различных реализаций в сфере навигации по сайту и представления информации. He was evidently a drunk, good websites for writing essays and was given periodically to turning his radio on at top volume and then either leaving the apartment or passing out cold on the floor.

Вы можете оставить ответ, или trackback с вашего сайта.

Leave a Reply

Надо сделать сайт? Мы выгодно сделаем сайт! ©