OverlapJs

OverlapJs is a lightweight and versatile npm package designed to seamlessly blend and overlap two HTML div elements, allowing you to effortlessly integrate images or colors into the overlapping areas.

Features

• Intersection Detection: Quickly determine if two elements overlap on the web page.
• Overlap Fill: Seamlessly fill the intersecting area of two elements with customizable content.
• Ease of Use: Straightforward API for integrating overlap detection and filling into your web projects.
• Flexibility: Customize the appearance and behavior of the filled overlap to suit your needs.
• Lightweight: Minimal overhead ensures optimal performance.

Installation

You can install OverlapJs via npm: npm install overlap-js

Usage

Using OverlapJs in your TypeScript project is straightforward:

1. Create a container element where you want the overlapping to happen. In this element, add a top div and a bottom div.

<div class="overlap-container">
    <div class="overlap-bottom"></div>
    <div class="overlap-top"></div>
</div>

2. Import the library:

import { Overlap } from 'overlap-js';

3. Create an instance of Overlap and specify the config object:

 new Overlap({
    container: '.overlap-container',
    topElement: '.overlap-top',
    bottomElement: '.overlap-bottom',
    overlapStyle: {
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
        backgroundImage: 'url(https://source.unsplash.com/random/300×300?nature)'
    },
    overlapClass: 'bg-purple'
});

Configuration object

Key	Type	Description	Required
container	string	Attribute of container element	Yes
topElement	string	Attribute of element (inside the container) where the bottom element is projected	Yes
bottomElement	string	Attribute of element (inside the container) that will serve as the mask	Yes
overlapStyle	CSSStyleDeclaration	CSS style declaration object with styles for the overlap area. See CSSStyleDeclaration	No
overlapClass	string	CSS classes for the overlap area	No

Contributing

Contributions are welcome! Feel free to open issues or submit pull requests on the GitHub repository.

License

OverlapJs is licensed under the ISC License.

Work in progress

• Scale on top and bottom element. If you want to use css scale, you can scale the container element
• SVG support