Сегодня я покажу, как сделать
фото в стиле винтаж с помощью JavaScript.
Сделать представленный эффект достаточно просто.
Вначале необходимо скачать архив с исходными файлами и распаковать его в любое удобное для Вас место.
В архиве Вы обнаружите три файла:
- 1.html – файл страницы с примером.
- vintage.js – необходимый JavaScript.
- 123.jpg – изображение для демонстрации.
Теперь Вам нужно взять файл
vintage.js и с помощью
FTP-клиента или любым другим удобным для Вас способом закачать его на свой хостинг в любую директорию Вашего сайта.
Следующим действием будет его подключение.
Обычно все скрипты подключаются из «головы» сайта за исключением отдельных случаев.
Голова – это теги <head></head>, которые располагаются в самом начале .html документов.
Если Вы используете WordPress, то Вам необходимо открыть файл header.php, который находится в папке Вашей активной темы оформления, найти вышеупомянутые теги и между ними вписать следующий код:
1
|
<script type="text/javascript" src="http://Ваш сайт/путь к файлу/vintage.js"></script>
|
В нём Вам потребуется прописать путь к файлу
vintage.js, который был ранее закачан на
хостинг.
Чуть ниже всё в том же файле header.php находим открывающий тег <body> и вставляем ещё один кусок скрипта:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script>
var img = document.getElementById('picture');
var options = {
onError: function() {
alert('ERROR');
}
};
var effect = {
vignette: 0.6,
sepia: true,
contrast: -70
};
new VintageJS(img, options, effect);
</script>
|
Он отвечает за наложение CSS эффектов:
- vignette: 0.6 – затемнение.
- contrast: -70 – контраст изображение.
Осталось вставить картинку на сайт и присвоить ей необходимый ID.
По умолчанию в данном скрипте используется id="picture". При желании можно установить своё значение, но сейчас нам это не нужно.
Откройте HTML-редактор, найдите код своего изображения и добавьте в него наш id:
1
|
<img id="picture" src="123.jpg"/>
|
После всех манипуляций у Вас будет красивое фото в стиле винтаж.
На сегодня это всё.
Хотелось бы услышать в комментариях Ваше мнение по поводу данного эффекта!
Всего Вам наилучшего!
С уважением, Денис Черников!
