Плагины до/после для реализации эффекта было/стало на сайте

Привет, друзья. Недавно занимался сайтом для стоматологической клиники и заказчик просил реализовать эффект было/стало и применить его к фото с челюстью. Я решил найти готовый плагин до/после, чтобы как можно быстрее реализовать эту задачу, а сейчас делюсь этим скриптом и его настройкой в блоге.

Пример работы плагина до после

Извиняюсь за эту неприятную картинку, но это пример реального использования на сайте.

В общем мне понравилось 2 плагина:

Они полностью решали мою задачу и подходили по требованиям. К тому же, в обоих виджетах все в порядке с адаптивностью. Сначала я воспользовался плагином Cocoen, так как его можно использовать без jQuery. На сайте стояла древняя версия, и я боялся, что с ней виджет не заработает. Все было отлично, пока не пришлось добавить этот блок в слайдер, ведь заказчик захотел, чтобы можно было посмотреть несколько работ.

Тут и начались проблемы. Слайдер, который я использовал, поддерживал прокрутку касанием и перетягиванием мыши. Cocoen - тоже. Отключение этого эффекта у слайдера, приводило к неработоспособности и плагина до/после, а так как времени было мало, решил по-быстрому подключить TwentyTwenty, так как в нем реализована возможность переключения эффекта без клика, а просто движением мыши при попадании курсора в область плагина. На нем и остановимся.

Установка и настройка jQuery плагина с эффектом до/после - TwentyTwenty

Забегая вперед, покажу, какая у меня в итоге получилась структура проекта. Прикладываю ее для тех, кто не хочет скачивать исходник, а предпочитает копировать код и разметку из статьи.

Структура проекта для реализации эффекта было / стало

Настройка плагина очень проста. Для начала давайте создадим в html такую структуру:

  <div class="before-after">

    <!-- Картинка  "до" -->
    <img class="before-after__item" src="http://placehold.it/400x200&text=1" />

    <!-- Картинка  "после" -->
    <img class="before-after__item" src="http://placehold.it/400x200&text=2" />
    
  </div>

Затем, после подключенного в ваш проект jQuery нужно добавить пути к скрипту и инициализировать его.

  <!-- Скрипты -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="/js/jquery.twentytwenty.js"></script>
  <script src="/js/jquery.twentytwenty.js"></script>

  <script>
    $(function () {
      $(".before-after").twentytwenty();
    });
  </script>

Не забываем про таблицу стилей:

  <link rel="stylesheet" href="/css/twentytwenty.css">

На этом основная настройка закончена, дальше идут только дополнительные возможности, которые я нашел полезными для себя. Во-первых, это возможность сделать как горизонтальное сравнение, так и вертикальное.

TwentyTwenty вертикально сравнение изображений

Делается это при помощи настройки "orientation". Вот так:

<script>
    $(function () {
      $(".before-after").twentytwenty({
        orientation: 'vertical'
      });
    });
  </script>

По умолчанию, в плагине выводится вот такое описание секций.

Описание секций в скрипте до после
Описание секций

Чтобы его отредактировать, нужно воспользоваться параметрами "before_label" и "after_label".

  <script>

    $(function () {
      $(".before-after").twentytwenty({
        before_label: 'Было',
        after_label: 'Стало',
      });
    });
    
  </script>

А для того, чтобы отключить эти подсказки, можно перевести в значение "true" параметр "no_overlay".

Самый важный для меня параметр, с которым удалось решить проблемы, описанные в начале статьи, это возможность не кликать для перетаскивания ползунка, а просто водить мышкой.

<script>

    $(function () {
      $(".before-after").twentytwenty({
        move_slider_on_hover: true,
      });
    });

  </script>

На этом - все. Простой скрипт до/после, но он помогает нагляднее продемонстрировать результат вашей работы, показать "боль" или "страх" клиента и сразу же снять стресс, объяснив, что проблема решаема, вы с этим уже сталкивались и сможете качественно выполнить свою работу.

Кроме того, такая реализация портфолио или отзывов положительно влияет на конверсию и поведенческие факторы.

Исходник для плагина с эффектом до/после

Размер: 0,216

Похожие публикации

5 комментариев

  1. Васька

    Спасибо, Дмитрий, что делитесь с нами инструментами.

  2. Алексей

    Спасибо!

  3. Сергей

    Добрый вечер!
    Выполнил установку плагина по вашей инструкции, но возникла проблема. Плагин отображается на странице только после изменения размера окна браузера в любую сторону. Не подскажите в чем может быть проблема?
    Спасибо.

    1. Дмитрий Давыдов

      Сергей, нужно смотреть консоль браузера на предмет ошибок, пробовать подключать без других плагинов, смотреть не влияют ли они на работу плагина.

  4. Эл Ипатов

    Дмитрий, спасибо. Творческая работа...

Добавить комментарий

 

© 2014 — 2021, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности