Смена изображения ползунком - "До" и "После".

Для одного из проектов нужно было показать на двух фотографиях различия между изделями до и после реставрации

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

Применение скрипта настолько простое, что справится любой новичок в вёрстке.

Делимся своей находкой - может быть кому-то ещё пригодится

Вам нужно показать на сайте различия между двумя изображениями? TwentyTwenty, визуальный инструмент для сравнения, позволяет легко это осуществить!

Как это работает

TwentyTwenty работает путем наложения двух изображений друг на друга. При перемещении ползунка по изображению он использует свойство CSS clip для обрезки изображения слева. Это позволяет изображению справа отображаться через контейнер. Мы используем пользовательские события движения из библиотеки jquery.event.move для поддержки перемещения ползунка 1:1 на мобильных устройствах.

Настройка

Начать работу предельно просто - оберните два изображения в контейнер. Первое изображение будет слева, а второе – справа. Вот пример контейнера:

<div id="container1">
  <img src="sample-before.png">
  <img src="sample-after.png">
</div>

Затем вызовите этот контейнер после загрузки образов:twentytwenty()

$(function() {
  $("#container1").twentytwenty();
});

И вуаля!

Предотвращение FOUC*

Если вы хотите предотвратить FOUC, просто добавьте класс в свой контейнер следующим образом: twentytwenty-container

<div id='container1' class='twentytwenty-container'>
  <img src='sample-before.png'>
  <img src='sample-after.png'>
</div>

Параметры JavaScript

В TwentyTwenty можно передать следующие параметры:

Зависимости

Этот плагин зависит от следующих файлов:

• 1. jQuery
• 2. jquery.event.move — используется для поддержки сенсорных событий на мобильных устройствах.

*FOUC, или вспышка нестилизованного текста — это случай, когда веб-страница ненадолго появляется со стилями браузера по умолчанию перед загрузкой внешней таблицы стилей CSS, из-за того, что движок веб-браузера отображает страницу до того, как вся информация будет извлечена. Страница исправляется, как только правила стиля загружены и применены; Однако этот сдвиг может отвлекать. Связанные с этим проблемы включают вспышку невидимого текста и вспышку искусственного текста.