Biblioteca de resaltado de elementos de estilo Spotlight-Limelight. js

Vista prévia

Descripción

Limelight. js es una biblioteca de JavaScript independiente para crear un efecto de foco para resaltar cualquier elemento DOM dentro del documento.

Con un efecto de transición suave al cambiar entre elementos DOM resaltados. Ideal para la visita a la característica/sitio.

También funciona con un elemento DOM dinámico que ajusta automáticamente la altura & anchura para ajustarse al tamaño del elemento. Dependiendo del < a href = "https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver" target = "_ blank" rel = "noopener" > MutationObserver API .

Funcionamiento

Instalación.

# NPM
$ npm install limelight --save

import Limelight from 'limelight';

O incluya los siguientes archivos JavaScript y CSS en la página.

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

Cree una nueva instancia de Limelight. js y especifique el elemento de destino.

const demo = new Limelight(



document.querySelector(".target")
);

Aplique el efecto de foco al elemento.

demo.open();

Personalice el efecto de foco con las siguientes opciones.

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: {}




);

Registro de cambios

10/07/2018

• Style (CSS): eliminar espacios adicionales.

09/30/2018

• Añada la transición a superposición.