Spotlight-style Element Highlighting Library – limelight.js

Preview:

Description:

limelight.js is a standalone JavaScript library for creating a spotlight effect to highlight any DOM element within the document.

With a smooth transition effect when switching between highlighted DOM elements. Ideal for feature/site tour.

Also works with dynamic DOM element that automatically adjusts the height & width to fit the size of the element. Depending on the MutationObserver API.

How to use it:

Installation.

# NPM
$ npm install limelight --save

import Limelight from 'limelight';

Or include the following JavaScript and CSS files on the page.

<link rel="stylesheet" href="/path/to/limelight.css">
<script src="/path/to/index.js"></script>

Create a new limelight.js instance and specify the target element.

const demo = new Limelight(
      document.querySelector(".target")
);

Apply the spotlight effect to the element.

demo.open();

Customize the spotlight effect with the following options.

const demo = new Limelight(
      // offset in pixels
      offset: 10,
      // click to close
      closeOnClick: true,
      // default classes
      classes: {
          window: 'limelight__window',
          activeClass: 'limelight--is-active',
      },
      // extra CSS styles
      styles: {}
      
);

Changelog:

v2.0.0 (06/14/2018)

• wrapper: Fix for page height jump.

10/07/2018

• style(css): Remove additional spaces.

09/30/2018

• Add transition to overlay.