Author: | jayfreestone |
---|---|
Views Total: | 390 views |
Official Page: | Go to website |
Last Update: | June 14, 2019 |
License: | MIT |
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.