Плагины до/после для реализации эффекта было/стало на сайте
Привет, друзья. Недавно занимался сайтом для клининговой компании и заказчик просил реализовать эффект было/стало и применить его к фото с квартирой. Я решил найти готовый плагин до/после, чтобы как можно быстрее реализовать эту задачу, а сейчас делюсь этим скриптом и его настройкой в блоге.
В общем мне понравилось 2 плагина:
Они полностью решали мою задачу и подходили по требованиям. К тому же, в обоих виджетах все в порядке с адаптивностью. Сначала я воспользовался плагином Cocoen, так как его можно использовать без jQuery. На сайте стояла древняя версия, и я боялся, что с ней виджет не заработает. Все было отлично, пока не пришлось добавить этот блок в слайдер, ведь заказчик захотел, чтобы можно было посмотреть несколько работ.
Тут и начались проблемы. Слайдер, который я использовал, поддерживал прокрутку касанием и перетягиванием мыши. Cocoen - тоже. Отключение этого эффекта у слайдера, приводило к неработоспособности и плагина до/после, а так как времени было мало, решил по-быстрому подключить TwentyTwenty, так как в нем реализована возможность переключения эффекта без клика, а просто движением мыши при попадании курсора в область плагина. На нем и остановимся.
Установка и настройка jQuery плагина с эффектом до/после - TwentyTwenty
Забегая вперед, покажу, какая у меня в итоге получилась структура проекта. Прикладываю ее для тех, кто не хочет скачивать исходник, а предпочитает копировать код и разметку из статьи.
Настройка плагина очень проста. Для начала давайте создадим в html такую структуру:
1 2 3 4 5 6 7 8 9 | < 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 нужно добавить пути к скрипту и инициализировать его.
01 02 03 04 05 06 07 08 09 10 | <!-- Скрипты --> <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". Вот так:
1 2 3 4 5 6 7 | <script> $( function () { $( ".before-after" ).twentytwenty({ orientation: 'vertical' }); }); </script> |
На этом - все. Простой скрипт до/после, но он помогает нагляднее продемонстрировать результат вашей работы, показать "боль" или "страх" клиента и сразу же снять стресс, объяснив, что проблема решаема, вы с этим уже сталкивались и сможете качественно выполнить свою работу.
Кроме того, такая реализация портфолио или отзывов положительно влияет на конверсию и поведенческие факторы.
Я дарю тебе бесплатно скрипты, ты меня благодаришь за это
посмотри, может реклама тебе подходит
Кнопка появится через: секунд