Spotlight-style Element Highlighting Library – limelight.js

Category: Javascript | October 7, 2018
Author: jayfreestone
Views Total: 662
Official Page: Go to website
Last Update: October 7, 2018
License: MIT

Preview:

Spotlight-style Element Highlighting Library – limelight.js

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:

10/07/2018

  • style(css): Remove additional spaces.

09/30/2018

  • Add transition to overlay.

You Might Be Interested In:


Leave a Reply