IMAGE COMPARE SLIDER
by Rehmat (Animated Creativity) - MIT License

1. Add to the <head>:    <link rel="stylesheet" href="compare.css">
   Add before </body>:   <script src="compare.js"></script>
2. HTML:
   <div class="cmp" data-compare data-compare-before="Before" data-compare-after="After">
     <img src="before.jpg" alt="Before">
     <img src="after.jpg"  alt="After">
   </div>

Options: data-compare-start="35"   start position in percent
         data-compare-vertical     top / bottom instead of left / right
         data-compare-hover        follows the mouse without a click
         data-compare-intro        short sweep when first seen
Look:    --cmp-line (colour), --cmp-knob (knob size)

From JavaScript:  ImageCompare(element).set(70)
Event:            element.addEventListener('compare:change', e => e.detail.value)

Open index.html to see all three versions.

More free kits and custom work: https://animatedcreativity.com/
