4026a3b27addbb152e1875de8f46d4[1]

vintageJS

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

В плагин встроены три основные надстройки эффектов, которые легко можно править.

Пример Скачать

Требования

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

Плагин был протестирован в следующих браузерах:

  • Mozilla FireFox 3.16.14
  • Google Chrome 9.0.597.107
  • Apple Safari 5.0.3
  • Opera 11.01
  • Internet Explorer 9

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

Сначала подгружаем библиотеку jQuery, затем vintageJS и стили vintageJS в заголовке вашего документа:

Следующим шагом присвоим на событие нажатия на изображение вызов функции винтажного эффекта. Например, так:

Вот и все! Если у изображения есть класс vintage, то при клике по этому изображению применится эффект.

Настройки

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

  • default: надстройка по умолчанию
  • sepia: эффект сепии
  • green: зеленый цвет
  • grayscale: конвертация в черно-белое изображение
  • custom: Можно корректировать только кривые

Если вы захотите поменять стиль надстройки, то вам будет полезна следующая информация:

  • vignette: Чтобы убрать эффект виньетки, поставьте эту настройку в false. В противном случае нужно указать количество для цветов «black» и «white» в пределах между 0 и 1, чтобы указать силу виньетирования. Пример: vignette: {black:0.5, white:0.2}
  • noise: Сколько шума добавить к изображению.
  • screen: Добавляет слой размытия цветов. Вы можете определить сплошной цвет и прозрачность слоя. Пример: screen: { red: 227, green: 12, blue: 169, strength: 0.1 }
  • desaturate: False или значение между 0 и 1, которое определяет процент того, насколько изображение будет ненасыщенно.
  • allowMultiEffect: Если установить в true, тогда винтажный эффект можно будет вызывать несколько раз. По умолчанию значение равно false.
  • mime: Установить тип mime для изображения. По умолчанию image/jpeg
  • viewFinder: Путь к изображению для создания эффекта ttv-Effect (). Пример изображения можно найти в documentation/img/viewfinder.jpg (Источник: Nesster on Flickr)
  • callback: Задается функция обратного вызова

А вот и пример запуска плагина:

Вот и все! Если есть вопросы, оставляйте комментарии, обязательно ответим.

Хочешь бесплатно поиграть в Супер Марио? Заходи на http://admario.narod.ru/mario-4.html


2 комментарий на “vintageJS

  1. а как этот эффект применить к миниатюре картинки, что бы без клика, по умолчанию был интаж, а при полном открытии обычная картинка?

    Thumb up 0 Thumb down 0

Оставить комментарий