Шторка или изображение "до" и "после"
19 апреля 2019 13:52:48
13528 просмотров
В этой статье разберем как сделать шторку с изображением "до" и "после". Для реализации будем использовать плагин twentytwenty.
Скачиваем плагин, подключаем js и css файлы из архива. Также подключим jQuery и подготовим два изображения ("до" и "после") одинаковых размеров.
Создаем html конструкцию:
<div class="curtain"> <img src="images/curtain_image_1.jpg"> <img src="images/curtain_image_2.jpg"> </div>
Подключаем скрипт:
<script type="text/javascript"> $(function() { $(".curtain").twentytwenty({ default_offset_pct: 0.5, // Начальное положение шторки orientation: 'horizontal', // Движение шторки ("horizontal" или "vertical") before_label: 'До', // Подпись "до" after_label: 'После', // Подпись "после" no_overlay: false, // Не отображать оверлей для подписей "до" и "после" move_slider_on_hover: false, // Если true, то при наведении на блок сразу же активируется перетаскивание шторки move_with_handle_only: true, // Перемещать шторку движением пальца click_to_move: true // Если true, то при нажатии на область с изображениями, шторка переместиться на место клика }); }); </script>
И чтобы при загрузке страницы изображения не прыгали, добавим стили:
<style type="text/css"> .curtain img{ display: none; } .curtain.twentytwenty-container img{ display: block; } </style>
Материалы по теме
11 декабря 2018 21:59:49
Мобильное меню для сайта на CSS и jQuery
На дворе время мобильных устройств, а значит каждый сайт должен иметь удобную адаптивную версию. Одной из важнейших составляющих адаптивной версии сайта является мобильное меню.
23 сентября 2018 23:51:07
Таймер обратного отсчёта на JavaScript
В этой статье представлен способ реализации таймера обратного отсчёта. При помощи такого таймера можно презентовать дату начала (окончания) какого-нибудь события.