Skip to content
/ cocoen Public
forked from koenoe/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.

License

Notifications You must be signed in to change notification settings

crawft/cocoen

 
 

Repository files navigation

Travis-CI David npm

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" />

Pure Javascript

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

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

jQuery

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

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

AngularJS

Coming soon!

License

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

About

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.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 91.4%
  • CSS 8.6%