Skip to content
Draw SVG lightning bolts on to any element, creating a flash effect.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
LICENSE
README.md
demo.html
index.js
index.min.js
package.json
yarn.lock

README.md

light-it-up

Draw SVG lightning bolts on to any element, creating a flash effect.

Usage

Just add the library and call the flash function:

<html style="height: 100%">
<head>
  <script src="https://raw.githubusercontent.com/guggero/light-it-up/master/index.js"></script>
</head>
<body>
<button onclick="flash({duration: 500})">Flash for 0.5s</button>
</body>
</html>

Have a look at the demo too

Options:

{
  element: document.getElementById('foo'), // element to render into, default: document.body
  duration: 1000, // duration of flash effect in milliseconds, default 800
  zIndex: 9999, // CSS property 'z-index' of the inserted <div>, default 1000
  colorFlash: '#ffffff', // color of the flash, default rgba(255, 255, 255, 1)
  colorBlur: '#333333', // color of the blur effect, default rgba(192, 192, 255, 1)
}

Credits

This code was initially written by robtex for moneni.com and was refactored into an NPM library with his permission.

You can’t perform that action at this time.