Здравствуйте, уважаемые читатели XoZbloga! Если вы посещаете mail.ru, раздел авто новостей, то наверняка видели там один замечательный эффект при сравнении двух изображений, когда одно изображение как бы перекрывает другое. Другими словами это слайдер сравнения изображений до и после. Для того чтобы реализовать подобный эффект есть множество способов и в этой статье опишу один из них. Будем использовать плагин jQuery — Twentytwenty, страница проекта здесь.
Как работает Twentytwenty
Плагин накладывает два изображения друг на друга. Когда ползунок слайдера перемещается по изображению, используется свойство CSS clip для обрезки части изображения. Это позволяет изображению снизу проявляться с обрезанной стороны верхнего изображения. Также используются пользовательские события перемещения из библиотеки jquery.event.move, чтобы поддерживать движение ползунка на мобильных устройствах.
Подключение
Все необходимые файлы для работы «слайдера до и после» вы сможете получить на странице проекта на Github, ссылку указал в начале статьи. В общем случае для работы потребуется библиотека jQuery, jquery.event.move, непосредственно скрипт самого плагина и базовые стили.
1 2 3 4 | <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script> <script src="js/jquery.event.move.js" type="text/javascript"></script> <script src="js/jquery.twentytwenty.js" type="text/javascript"></script> <link rel="stylesheet" href="css/twentytwenty.css" type="text/css" media="screen" /> |
После чего уже в разметке страницы мы описываем контейнер с двумя изображениями:
1 2 3 4 | <div id="container1"> <img src="before.jpg" /> <img src="after.jpg" /> </div> |
И инициализируем плагин, используя селектор по идентификатору контейнера:
1 2 3 | $(function(){ $("#container1").twentytwenty(); }); |
Параметры плагина Twentytwenty
Статья не будет полной без рассмотрения настроек и параметров данного плагина. Все они задаются при инициализации слайдера:
1 2 3 4 5 6 7 8 9 10 11 12 | $(function(){ $("#container1").twentytwenty({ default_offset_pct: 0.5, // сколько показывать 'изображение до' в процентах (максимально 1) сразу после загрузки страницы orientation: 'horizontal', // ориентация слайдера ('horizontal' или 'vertical') before_label: 'До', // подпись 'до' after_label: 'После', // подпись 'после' no_overlay: false, // не показывать затемнение с надписями 'до' и 'после' move_slider_on_hover: false, // двигать "ползунок" слайдера вместе с курсором мыши move_with_handle_only: true, // двигать слайдер только за его "ползунок" click_to_move: false // разрешить перемещение "ползунка" слайдера по клику на изображении }); }); |
И еще одно замечание, чтобы избежать нестилезованного контента стоит задать класс twentytwenty-container для контейнера, вот так:
1 2 3 4 | <div id="container1" class="twentytwenty-container"> <img src="before.jpg" /> <img src="after.jpg" /> </div> |
Благодаря этому также можно создать несколько экземпляров слайдера на странице:
1 2 3 | $(function(){ $(".twentytwenty-container").twentytwenty(); }); |
Поддержка
- IE8+
- Firefox (latest)
- Chrome
- Safari
- Android
- iOS (iPhone, iPad)
Также хочу повториться, плагин вполне работоспособен на мобильных устройствах, например на iphone xs цена которого порадует вас в интернет-магазине iPhoneFix.
Если вы уже используете похожий эффект на своих проектах, то не забывайте делиться этим в комментариях после статьи. Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте. Спасибо за прочтение. До связи!
Источник статьи/урока: https://xozblog.ru