It's an image comparison

Getting started

CDN

To use a CDN all you need is to add the following code in the HTML page:

<script type="module" src="https://cdn.jsdelivr.net/gh/OmarCastro/its-an-image-comparison@0.1.0/dist/image-comparison.element.min.js?named=image-comparison"></script>

NPM

If you wish to import from npm and use a bundler, you can install the its-an-image-comparison package

npm install its-an-image-comparison

Not all bundlers support query strings, it is recommended to import and register the component, like the following code:

import element from 'its-an-image-comparison'

customElements.define('qr-code', element)

Examples

Hello world

<image-comparison>
    <img src="assets/image-1.png">
    <img src="assets/image-2.png">
</image-comparison>

With opacity

<image-comparison>
    <img src="assets/Gartus-glass-ball-1.svg">
    <img src="assets/Gartus-glass-ball-2.svg">
</image-comparison>

With antialias

<image-comparison data-antialias>
    <img src="assets/image-1.png">
    <img src="assets/image-2.png">
</image-comparison>

Using figures

<image-comparison>
    <figure>
        <img src="assets/image-1.png">
    </figure>
    <figure>
        <img src="assets/image-2.png">
    </figure>
</image-comparison>

With captions

<image-comparison>
    <figure>
        <img src="assets/image-1.png">
        <figcaption>Left image</figcaption>
    </figure>
    <figure>
        <img src="assets/image-2.png">
        <figcaption>Right image</figcaption>
    </figure>
</image-comparison>

Styling

<image-comparison class="styling-example" data-antialias>
    <figure>
        <img src="assets/image-1.png">
        <figcaption>Left image</figcaption>
    </figure>
    <figure>
        <img src="assets/image-2.png">
        <figcaption>Right image</figcaption>
    </figure>
</image-comparison>

.styling-example {
   --antialias-diff-color: yellow;
   
   --diff-color: red;
}