Sozdaiblog.ru
Назад

Как сделать фото в стиле ВИНТАЖ?

Опубликовано: 06.11.2013
Время на чтение: 6 мин
2
6

Как сделать фото в стиле винтажХорошего настроения всем друзьям и читателям – 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"/>

После всех манипуляций у Вас будет красивое фото в стиле винтаж.

На сегодня это всё.

Хотелось бы услышать в комментариях Ваше мнение по поводу данного эффекта!

Всего Вам наилучшего!

С уважением, Денис Черников!

Поделиться
Похожие записи
Комментарии:
  • Надежда
    Опубликовано: 09.11.2013 Ответить на сообщение

    Денис, здравствуйте. Вы не подскажите как сделать так чтобы можно было просмотреть увеличенную картинку , не в отдельном окне, а при наведении мыши? Пример: http: //urpcc.ru/. Спасибо.

    • Денис Черников
      Опубликовано: 09.11.2013 Ответить на сообщение

      Здравствуйте, Надежда!
      Пожалуйста, вот моя статья — sozdaiblog.ru/dizayn-blog...nii-kursora.html

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.