This package provides a simple way to create a before and after effect using two images. It allows you to easily create this effect by passing the container ID and an optional configuration object with the following parameters:
Install before-to-after with npm
npm i before-to-after
Add container with the id btaContainer
and inside add the img tag with the before-image
and after-image
id
<div id="btaContainer">
<img src="/image-1.jpg" id="before-image" alt="" />
<img src="/image-2.jpeg" id="after-image" alt="" />
</div>
create the instance of before-to-after
import beforeAfterEffect from 'before-to-after'
const bta = new beforeAfterEffect('btaContainer', {
width: '500px',
height: '300px',
rangeInitialValue: '0',
initialColor: '#000000'
})
Object conf is optional.
Parameter | Type | Description |
---|---|---|
width |
string |
optional. Specifies the width of the container element. Default value: '500px'. |
height |
string |
optional. Specifies the height of the container element. Default value: '300px' |
rangeInitialValue |
string |
optional. Sets the initial value of the position. Default value: '50'. |
initialColor |
string |
optional. Defines the initial color of the range input. Default value: '#000000'. |
For support, email bis.arroyo@gmail.com