Author: | diamanthaxhimusa |
---|---|
Views Total: | 2,267 views |
Official Page: | Go to website |
Last Update: | January 23, 2021 |
License: | MIT |
Preview:

Description:
Pixelcompare is a vanilla JavaScript image comparison library that creates an interactive, horizontal or vertical handler bar to compare 2 images for differences.
Supports touch, drag, and mouse hover events.
How to use it:
1. Just load the Pixelcompare’s files in the document and we’re ready to go.
<link href="css/pixelcompare.css" rel="stylesheet"> <script src="js/pixelcompare.js"></script>
2. Wrap after/before images into a container element with the data-pixelcompare
attribute and pixelcompare
class.
<div id="example" class="pixelcompare" data-pixelcompare> <img src="before" width="100%"/> <img src="after" width="100%"/> </div>
3. Set a height for the parent container and done.
#example { height: 450px; }
4. Set the comparison slider to ‘Vertical’.
<div id="example" class="pixelcompare" data-pixelcompare data-horizontal> <img src="before" width="100%"/> <img src="after" width="100%"/> </div>
5. Compare 2 images with mouse hover.
<div id="example" class="pixelcompare" data-pixelcompare data-hover> <img src="before" width="100%"/> <img src="after" width="100%"/> </div>
Changelog:
01/23/2021
- pixelcompare script update & demo