Хорошего настроения всем друзьям и читателям – Sozdaiblog.ru!
Сегодня я покажу, как сделать фото в стиле винтаж с помощью JavaScript.
Сделать представленный эффект достаточно просто.
Вначале необходимо скачать архив с исходными файлами и распаковать его в любое удобное для Вас место.
В архиве Вы обнаружите три файла:
- 1.html – файл страницы с примером.
- vintage.js – необходимый JavaScript.
- 123.jpg – изображение для демонстрации.
Теперь Вам нужно взять файл vintage.js и с помощью FTP-клиента или любым другим удобным для Вас способом закачать его на свой хостинг в любую директорию Вашего сайта.
Следующим действием будет его подключение.
Обычно все скрипты подключаются из «головы» сайта за исключением отдельных случаев.
Голова – это теги <head></head>, которые располагаются в самом начале .html документов.
Если Вы используете WordPress, то Вам необходимо открыть файл header.php, который находится в папке Вашей активной темы оформления, найти вышеупомянутые теги и между ними вписать следующий код:
<script type="text/javascript" src="https://Ваш сайт/путь к файлу/vintage.js"></script>
В нём Вам потребуется прописать путь к файлу vintage.js, который был ранее закачан на хостинг.
Чуть ниже всё в том же файле header.php находим открывающий тег <body> и вставляем ещё один кусок скрипта:
<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:
<img id="picture" src="123.jpg"/>
После всех манипуляций у Вас будет красивое фото в стиле винтаж.
На сегодня это всё.
Хотелось бы услышать в комментариях Ваше мнение по поводу данного эффекта!
Всего Вам наилучшего!
С уважением, Денис Черников!
Денис, здравствуйте. Вы не подскажите как сделать так чтобы можно было просмотреть увеличенную картинку , не в отдельном окне, а при наведении мыши? Пример: http: //urpcc.ru/. Спасибо.
Здравствуйте, Надежда!
Пожалуйста, вот моя статья — sozdaiblog.ru/dizayn-blog…nii-kursora.html
Мне очень понравился этот урок на Sozdaiblog.ru! Я уже скачал архив и распаковал его. Загрузил файл vintage.js на свой хостинг и подключил его к своему сайту. Теперь я готов начать создавать фото в стиле винтаж с помощью JavaScript. Спасибо за прекрасное объяснение и инструкции! Удачи всем в создании интересных и красивых фото!
Классный мастер-класс! Спасибо за полезную информацию и детальную инструкцию. Я с удовольствием попробую сделать фото в стиле винтаж с помощью JavaScript. Удачи вам и всем читателям блога Sozdaiblog.ru!
Ваш поступает следующий код HTML для добавления JavaScript файла vintage.js в заголовок вашего сайта:
“`HTML
“`
Этот код гарантирует, что ваш JavaScript файл будет загружаться и выполняться при загрузке веб-страницы. Убедитесь, что у вас есть правильный путь к файлу vintage.js и что он доступен на вашем сервере.
Также вам потребуется добавить блок HTML для отображения примера фото в стиле винтаж:
“`HTML
“`
Этот блок кода создает изображение, которое будет отображаться на веб-странице. Убедитесь, что у вас есть правильный путь к файлу 123.jpg и что он доступен на вашем сервере.
После добавления этого кода вы сможете увидеть пример фото в стиле винтаж на вашей веб-странице. При необходимости вы можете настроить параметры и стили JavaScript файла vintage.js, чтобы достичь желаемого эффекта винтажа для своих фотографий. Удачи!