220 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 в заголовке вашего документа:
|
1 2 3 |
<script src="src/jquery.js"></script> <script src="src/vintage.js"></script> <link rel="stylesheet" type="text/css" href="css/vintagejs.css" media="all" /> |
Следующим шагом присвоим на событие нажатия на изображение вызов функции винтажного эффекта. Например, так:
|
1 2 3 4 5 6 7 |
<script> $(function () { $('img.vintage').click(function () { $(this).vintage(); }); }); </script> |
Вот и все! Если у изображения есть класс 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/jpegviewFinder: Путь к изображению для создания эффекта ttv-Effect (). Пример изображения можно найти вdocumentation/img/viewfinder.jpg(Источник: Nesster on Flickr)callback: Задается функция обратного вызова
А вот и пример запуска плагина:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> $(function () { $('img.vintage').click(function () { $(this).vintage({ vignette: { black: 0.8, white: 0.2 }, noise: 20, screen: { red: 12, green: 75, blue: 153, strength: 0.3 }, desaturate: 0.05 }); }); }); </script> |
Вот и все! Если есть вопросы, оставляйте комментарии, обязательно ответим.
Хочешь бесплатно поиграть в Супер Марио? Заходи на http://admario.narod.ru/mario-4.html
а как этот эффект применить к миниатюре картинки, что бы без клика, по умолчанию был интаж, а при полном открытии обычная картинка?
никак не могу его заставить работать, даже при нажатии кнопки мыши.((