Iris-Out Demo

Usage Instructions

Iris-Out is a lightweight library for highlighting DOM elements by shading everything else on the page.

npm install @nikitindiz/iris-out

// Initialize with default options
const iris = new IrisOut();

// Highlight a specific element
const elementToHighlight = document.getElementById('my-element');
iris.highlight(elementToHighlight);

// Remove the highlight when done
iris.clear();

// Highlight with callbacks
iris.highlight(
  elementToHighlight,
  // Update callback - called whenever the cutout position changes
  (rect) => {
    console.log('Element position updated:', rect);
  },
  // Clear callback - called when the highlight is cleared
  () => {
    console.log('Highlight was cleared');
  }
);

const iris = new IrisOut({
  backgroundColor: 'rgba(0, 0, 0, 0.7)', // Background color of the overlay
  opacity: 0.7,                          // Opacity of the overlay
  zIndex: 9999,                          // z-index of the overlay
  fadeDuration: 300,                     // Duration of animation in milliseconds
});