Сезонные изменения температуры в природе (до и после)
Температура воздуха — один из главных показателей климата. Двигайте ползунок, чтобы сравнить карты изотерм января и июля и увидеть, как меняется температурный режим на территории России от зимы к лету.
Сезонные изменения температуры в природе
Подвигайте ползунок, чтобы увидеть разницу
Где использовать эффект «До и после»#
Эффект подходит для любых предметов, где есть визуальные изменения:
- География — изменение границ, карт, климата
- История — старые и новые фотографии городов
- Биология — рост растения, развитие организма
- Экология — загрязнение реки, вырубка леса
- Искусство — реставрация картин
- Автодело — состояние автомобиля до и после ремонта
Подключение плагина#
Технически это делается так: подключается небольшой скрипт, а затем в нужном месте страницы вставляется 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.