README
BeforeAfter
BeforeAfter is a lightweight Javascript library to compare images in before/after view. The new version of the library does not use any dependencies.
Installation
BeforeAfter is available as the before-after
package on npm.
npm install before-after --save
Demo
Online demo is available on the BeforeAfter Github page.
How it works
HTML structure
Images must be superposed, and CSS class beforeafter-itemActive
determine the upper image.
<div class="beforeafter">
<div class="beforeafter-item beforeafter-itemActive">
<img src="img/1.jpg" />
</div>
<div class="beforeafter-item">
<img src="img/2.jpg" />
</div>
</div>
Basic usage
Every page that contains BeforeAfter, has to instanciates them. The following example create one item.
import BeforeAfter from 'before-after';
const beforeAfterItem = new BeforeAfter({
element: document.querySelector('.beforeafter')
});
beforeAfterItem.create();
Options
You can pass configuration options to BeforeAfter constructor. Example below show all default values. Allowed values are as follows:
{
element: null,
cursor: true,
direction: 'ltr',
selectors: {
item: '.beforeafter-item',
itemActive: '.beforeafter-itemActive',
cursor: '.beforeafter-cursor',
imageWrapper: '.beforeafter-wrapperImage',
}
}
element
- {Object} - DOM element referencecursor
- {Boolean} - DIV tag following mouse or fingerdirection
- {String} - 4 directions available:ltr
,rtl
,ttb
,btt
selectors
- {Object} - Configuration of selectors used by BeforeAfteritem
- {String} - Selector of each itemsitemActive
- {String} - Selector of the active itemcursor
- {String} - Selector of the cursorimageWrapper
- {String} - Selector of the picture wrapper (automatically generated)
Note: direction parameter uses naming shortcuts: left to right
, right to left
, top to bottom
, bottom to top
Callback functions
There is one callback function available with BeforeAfter.
After the instanciation
The create
method is a function which accepts a callback function in parameter.
import BeforeAfter from 'before-after';
const beforeAfterItem = new BeforeAfter({
element: document.querySelector('.beforeafter')
});
beforeAfterItem.create(() => {
// BeforeAfter element is created and ready
});
Available methods
Each BeforeAfter instanciations returns the instance of the class with somes available methods to easily manipulate the element.
Go to a position
The goTo()
function allows to move the animation to a specific position. The function accepts one parameter percentage
in percentage only (without unity).
The function can be used in the callback of the create()
function, to start the animation on a specific position.
beforeAfterItem.goTo(50);
Reset
The reset()
function allows to reset the animation and the cursor.
beforeAfterItem.reset();
Destroy
The destroy()
function allows to destroy all references of BeforeAfter and keep the original HTML structure.
beforeAfterItem.destroy();
Browsers support
BeforeAfter is compatible with all no-touch and touch devices such as Android or iOS. The library uses CSS transform property for better animations, all last browsers are compatible. More information in Can I Use