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

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

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

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

• TwenyTwenty.
• Cocoen.

Они полностью решали мою задачу и подходили по требованиям. К тому же, в обоих виджетах все в порядке с адаптивностью. Сначала я воспользовался плагином 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">

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

Делается это при помощи настройки "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>

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

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