Skip to content
/ cocoen Public

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

koenoe/cocoen

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Can be passed directly to Cocoen.create, like:

Cocoen.create(document.querySelector('.cocoen'), {
  color: '#ff0000',
  orientation: 'vertical',
  start: '75',
});

or you can set data attributes in the html:

<div
  class="cocoen"
  data-color="#ff0000"
  data-orientation="vertical"
  data-start="75"
>
  <img src="img/before.jpg" alt="" />
  <img src="img/after.jpg" alt="" />
</div>
Option Type Description
color String Default: "#fff". Color of drag control
orientation String Default: "horizontal". Orientation of Cocoen, can be 'horizontal' or 'vertical'
start String Default: "50". The start position of Cocoen as a percentage.

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.

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