Шторка или изображение "до" и "после"
19 апреля 2019 13:52:48
14577 просмотров
В этой статье разберем как сделать шторку с изображением "до" и "после". Для реализации будем использовать плагин 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>
Материалы по теме
24 марта 2018 14:00:56
Как защитить текст на сайте от копирования
Если у вас есть свой сайт, на котором вы пишите свои уникальные тексты и вы не хотите, чтобы ваши труды копировали недобросовестные владельцы других сайтов, то эта статья поможет вам чуть-чуть усложнить им задачу. Почему чуть-чуть? Да потому что, как ни крути, с любого сайта можно скопировать любой текст и скачать любое фото.
23 сентября 2018 23:51:07
Таймер обратного отсчёта на JavaScript
В этой статье представлен способ реализации таймера обратного отсчёта. При помощи такого таймера можно презентовать дату начала (окончания) какого-нибудь события.