Сезонные изменения температуры в природе (до и после)

Температура воздуха — один из главных показателей климата. Двигайте ползунок, чтобы сравнить карты изотерм января и июля и увидеть, как меняется температурный режим на территории России от зимы к лету.

Сезонные изменения температуры в природе
Подвигайте ползунок, чтобы увидеть разницу

Где использовать эффект «До и после»#

Эффект подходит для любых предметов, где есть визуальные изменения:

• География — изменение границ, карт, климата
• История — старые и новые фотографии городов
• Биология — рост растения, развитие организма
• Экология — загрязнение реки, вырубка леса
• Искусство — реставрация картин
• Автодело — состояние автомобиля до и после ремонта

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

Технически это делается так: подключается небольшой скрипт, а затем в нужном месте страницы вставляется HTML-код с двумя изображениями.

Скачайте плагин 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.