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.

  • cocoen

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
cocoen
229143.1.12 years ago6 years agoMinified + gzip package size for cocoen in KB

Readme

Cocoen
Version Downloads Last commit Build Status Coverage Status License
Touch-enabled before/after slider. Inspired by before-after.js.
Example

Quick start

Demo

Install

Install with NPM
npm install cocoen --save

Get it from CDN
<!DOCTYPE html>
<html>
  <head>
    <title>Cocoen from CDN</title>
  </head>
  <body>
    <div class="cocoen">
      <img src="img/before.jpg" alt="" />
      <img src="img/after.jpg" alt="" />
    </div>

    <!-- Load Cocoen library -->
    <script src="https://unpkg.com/cocoen/dist/cocoen.js"></script>

    <!-- Turns all `.cocoen` elements into Cocoens -->
    <script>
      Cocoen.parse(document.body);
    </script>
  </body>
</html>

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.js script in your page, and then:
Cocoen.create(document.querySelector('.cocoen'));

Multiple Cocoens in one page:
Cocoen.parse(document.body);

Options

| Option | Type | Description | | ------- | ------ | ------------------------------------------------------------ | | start | String | Default: "50". The start position of Cocoen as a percentage. | | color | String | Default: "#fff". Color of drag control |

Events

| Option | Description | | ------------------------------- | ---------------------------------------- | | cocoen-component:connected | Fires when Cocoen mounts | | cocoen-component:disconnected | Fires when Cocoen unmounts | | cocoen-component:resized | Fires when Cocoen dimensions are updated | | cocoen-component:updated | Fires when Cocoen is updated | | cocoen-component:visible | Fires when Cocoen is in viewport |

License

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