Сравнение изображений «до и после» для урока географии

Плагин "До и после" позволяет демонстрировать визуальные отличия двух иллюстраций. Эффект отлично подойдёт для учебников по географии, чтобы отразить изменения различных событий или объектов на топографической карте.

Источник изображений freepik

Подключение плагина#

Скачайте плагин Cocoen. Подключите его к странице учебника или сайта.

<link href="/css/cocoen.css" rel="stylesheet">
<script src="/js/cocoen.js"></script>

Добавьте код, который преобразует все блоки с классом "cocoen" в слайдер 

<script>
    Cocoen.parse(document.body);
</script>

Использование плагина#

В код страницы учебника (сайта) нужно встроить HTML код:

<div class="cocoen">
    <img src="do.jpg"/>
    <img src="posle.jpg"/>
</div>

Примечание

Чтобы улучшить отображение на мобильных устройствах, создавайте несколько видов размеров изображений (например, 1200x600 и 600x300). И указывайте их в атрибуте srcset тега img.

srcset="do_600.jpg 600w, do_1200.jpg 1200w" 

Этот атрибут укажет браузеру, какую версию изображения подгрузить на устройство пользователя. Таким образом, для устройств с небольшим экраном (до 600px) будет показана оптимизированная версия изображения do_600.jpg.