271 Other

Cocoen — сравнение изображений до и после

Визуальное сравнение двух изображений одного и того же момента, но при разных условиях. Передвигая бегунок слева направо или в обратном направлении можно наглядно сравнить состояния До и После.

HTML

Для правильного применения стилей, нужно сохранить наличие класса cocoen.
<div class="cocoen">
    <img src="img/before.jpg" alt="">
    <img src="img/after.jpg" alt="">
</div>

CSS

В шапке подключаем стили скрипта
<link rel="stylesheet" href="css/cocoen.min.css">

JS

Скрипт можно вызывать на чистом jаvascript
<script src="js/cocoen.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function(){
        new Cocoen(); // или new Cocoen(document.querySelector('.cocoen'));
    });
</script>
Если на одной странице будет несколько разных блоков .cocoen, то инициализацию скрипта нужно выполнять так:
document.querySelectorAll('.cocoen').forEach(function(element){
  new Cocoen(element);
});
Скрипт поддерживает вызов, как jQuery плагин, в этом случае его нужно вызывать так:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/cocoen.min.js"></script>
<script src="js/cocoen-jquery.min.js"></script>
<script>
    $(function(){
        $('.cocoen').cocoen();
    });
</script>
подключив предварительно jQuery библиотеку, и дополнительный файл cocoen-jquery.min.js
Скачать 7Загрузок 236,7 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи