bisarroyo / before-to-after

Before to after

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:

Installation

Install before-to-after with npm

  npm i before-to-after

Usage/Examples

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.

API Reference

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'.

Authors

• @bisarroyo

Support

For support, email [e-mail]