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

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

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

Так получилось, что за много лет создания сайтов аналогичной задачи как-то не было. Решение, однако, нашлось довольно быстро. Скрипт 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();
});

И вуаля!

До реставрации After restoration

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

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

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

Параметры JavaScript

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

ИмяЗначение по умолчаниюОписание
default_offset_pct 0.5 На каком расстоянии слева должен находиться ползунок по умолчанию

Зависимости

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

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

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

СкачатьTwentyTwenty

Понравилась статья?
Будем признательны, если поделитесь в соцсетях или мессенджерах, а также присоединитесь к нашей группе Вконтакте. Будет интересно!

Вас может заинтересовать:

Различные способы получить градиентную тень с помощью CSS (Gradient Shadows)
Различные способы получить градиентную тень с помощью CSS (Gradient Shadows)
Это вопрос задают довольно часто: Можно ли создавать тени из градиентов вместо сплошных цветов? Нет конкретного свойства CSS, которое делает это, и любая информация, которую вы найдёте об этом, в основном представляет собой множество приемов CSS для аппроксимации градиента. Мы на самом деле рассмотрим некоторые из них по ходу дела.

HostCMS v.6. Вертикальное меню на jQuery
HostCMS v.6. Вертикальное меню на jQuery
Простой пример левого вертикального выпадающего меню для групп товаров интернет магазина. Простая установка и настройка...

CSS анимация обводки блоков
CSS анимация обводки блоков
Интересные эффекты для границ блоков контента с анимацией, которые вам могут пригодиться при оформлении страниц сайта.

Эффект вращения с помощью CSS3
Эффект вращения с помощью CSS3
CSS3 позволяет создавать разнообразные эффекты на сайтах без использования javascript и громоздкого flesh. Все последние версии современных браузеров позволяют использовать css3 в полном объеме. Если Вы считаете, что посетители вашего сайта люди прогрессивные и пользуются современными браузерами, которые постоянно обновляют, то Вы смело можете использовать новые технологоии и не заботиться о тех, кто все еще живет в прошлом веке и использует IE5…

Несколько полезных CSS-трюков для Front-end разработчиков
Несколько полезных CSS-трюков для Front-end разработчиков
Хотим поделиться с вами несколькими CSS трюками, которые вам точно пригодятся при создании сайтов. Они позволят вам без использования Javascript создать анимацию и эффекты.

Вертикальное выпадающее меню на jQuery для HostCMS
Вертикальное выпадающее меню на jQuery для HostCMS
Простое вертикальное меню с плавно выпадающим подменю для сайтов на HostCMS. Работает на jQuery…

QRcode

2010-2024 © Веб студия iNikSite.ru (г. Подольск). Все права сохранены.

Цены на сайте носят ознакомительный характер и не являются публичной офертой! Просим уточнять цены при отправке заявки в нашу компанию. У нас действуют специальные предложения и скидки на различные варианты исполнения заказа и 100% предоплату!

Мы используем файлы cookie. Они помогают улучшить ваше взаимодействие с сайтом.