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

Февраль, 18 Мазиков Валентин Разработка сайтов

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

В общем мне понравилось 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>

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

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

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

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

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

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

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

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

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

Я дарю тебе бесплатно скрипты, ты меня благодаришь за это