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.
Install / Use
/learn @koenoe/CocoenREADME
Cocoen
Touch-enabled before/after slider. Inspired by before-after.js.
Quick start
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.
