propek / cocoen

Much like the caterpillar, your image will undergo a clear transformation with Cocoen. Making comparison really easy, it’s as straightforward way of seeing your images in a new light.

Touch-enabled before/after slider. Inspired by before-after.js.

Quick start

Demo

Install

Install with NPM

npm install cocoen --save

Install with Bower

bower install cocoen --save

Or download the latest release.

Usage

Only the class cocoen is mandatory to apply proper default styles:

<div class="cocoen">
  <img src="img/before.jpg" alt="">
  <img src="img/after.jpg" alt="">
</div>

Include the Cocoen stylesheet in your page:

<link rel="stylesheet" href="css/cocoen.min.css" />

Plain Javascript

Include the cocoen.min.js script in your page, and then:

new Cocoen(document.querySelector('.cocoen'));

Multiple Cocoens in one page:

document.querySelectorAll('.cocoen').forEach(function(element){
  new Cocoen(element);
});

jQuery

Include the cocoen.min.js and cocoen-jquery.min.js scripts in your page, and then:

$('.cocoen').cocoen();

License

The code and the documentation are released under the MIT License.