Add Interactive Masking Effects to Web Pages with Maskify.js

Preview:

Description:

Maskify is a lightweight JavaScript library for creating dynamic masking effects that respond to mouse movements.

The library adds an interactive layer to your website using CSS mask-image. As the user moves their mouse, a customizable mask reveals or hides parts of the underlying content.

See it in action:

How to use it:

1. Download and load the maskify.js file into your HTML document:

<script src="maskify.js"></script>
2. Create a container for the masking effect:

<div class="mask-container" id="mask">
  <h1>CSSScript.Com</h1>
</div>

3. Style the mask container:

#mask {
  background-color: #f1f1f1;
  text-align: center;
}

4. Create a new Maskify instance and apply the effect:

const mask = new Maskify("#mask");

5. Configure mask options through the following parameters:

• color: Mask color (default: black).
• size: Mask size (default: 15%).
• strength: Gradient intensity (default: 50).
• fallbackColor: Color for browsers without masking support (default: red).

const mask = new Maskify("#mask",{
  size: "10%",
  strength: 5,
  color: "black",
  fallbackColor:  "crimson",
});

6. Remove the masking effect and its event listener:

mask.destroy();