spotlighter

Spotlighter

Shines a circular spotlight centered on any point of a page. It's useful for highlighting features in your app for new users or introducing new new features to your users.

It takes a top and left coordinates which you can readily provide to it using modern browser's getBoundingClientRect() or using jQuery's position.

It's implemented using a giant div with a radial gradient that has sharp boundaries between transparent and translucent. It uses css3 animation to move gracefuly from one point to another.

If gradients aren't supported it gracefully falls back to a dark circle (or box if rounded corners aren't supported).

Example

var Spotlighter = require('spotlighter');

var spot = new Spotlighter({top: 100, left:100, radius: 120});
spot.show() // fades the spotlighter in.
...
spot.transform({top: 200, left:300})  // smoothly animate to the next position
...
// smoothly animate to the position of `.cool-new-feature`
spot.transform( 
  document.querySelector('.cool-new-feature').getBoundingClientRect() 
)

Caveats

When active, Spotligher sets the page body to overflow:hidden. Which means you can only use it above the fold. Future versions may not have this restriction.

Window resizing isn't implemented within Spotlighter since positioning is left to you. However, keeping the spotlight centered during a resize is pretty straightforward:

var yourTransform = function() {
  spot.transform(document.querySelector('.cool-new-feature').getBoundingClientRect()) 
}
window.addEventListener('resize', yourTransform)

Methods

spot.show()

Fades the spotlight in.

spot.hide()

Hides the spotlight without removing it from the DOM.

spot.destroy()

Hides the spotlight and removes it from the DOM.

spot.transform(options)

Takes the same options as the constructor. It smoothly animates the position using css3 animations. Changes to radius will take affect immediately since none of the browsers tested support animating gradients yet.