magnifying-div-animation

Installation

npm install magnifying-div-animation

Documentation

See Live Examples on CodeSandbox

"magnifying-div-animation" allows you to add a magnifying glass effect on an image. When you install this package, you install a container div that have a customizable background (for more details look at the parameters) and magnifying divs inside that listens to the the mouse movement inside the container div.

This package was built with react spring.

<Mag
	backgroundImage="url(https://helpx.adobe.com/content/dam/help/en/photoshop/using/convert-color-image-black-white/jcr_content/main-pars/before_and_after/image-before/Landscape-Color.jpg)"
	widthContent="20%"
	height="300px"
	width="100%"
	padding="15px"
/>

All adjustable parameters are defined by default,(but of course you can modify them) the size of the container div, the size of the divs with the magnifying glass effect, the number of magnifying divs, parameters related to the background image such as background-size, background-repeat, background-color, background-position.

The container div refers to the div that contains the magnifying divs.The magnifying div refers to the all the divs that you create inside the container div.

You can see below all the parameters you can change:

		The container div
propName	propType	defaultValue	isRequired	Explanation
height	string	'700px'	Yes	The parameter allows to set the height of the container div. You should use only values in px, or viewport, but not in %.
width	string	'100%'	Yes	The parameter allows to set the width of the container div. You should use values in px, or viewport, and %.
backgroundImage	string	"url(https://www.partir.com/images/incontournables/japon-hakone -fuji.jpg)"	Yes	This url is used for the maginifying divs.
padding	string	0	No	-
Opacity	string	".8"	No	-
backgroundRepeat	string	"no-repeat"	No	If you change this parameter it won't affect the magnifying div.
backgroundSize	string	"cover"	No	If you change this parameter it won't affect the magnifying div.
backgroundColor	string	"#fff"	No	-
opacity	string	'0.8'	Yes	-
		The magnifying div (is listening the mouse move event)
magnifyingDiv	string	4	Yes	This parameter defines the numbers of magnifying divs. Example : magnifyingDiv={1}
backgroundAttachmentContent	string	fixed	Yes	If you change this parameter it won't affect the container div.
backgroundPositionContent	string	0%	No	If you change this parameter it won't affect the container div.
backgroundSizeContent	string	"120% 120%"	Yes	If you change this parameter it won't affect the container div. It is required otherwise you won't get the magnifying div.