What it is:
An interactive jQuery plugin, flashlight.js lets users turn the lights out and explore your site using a flashlight. But be careful while you're looking around, when the lights are off, the monsters come out...
Features:
- Customizable flashlight beam and shadow
- Optional gremlin
- Fully customizable lightswitch
How to use it:
1. Include the 'jquery.flashlight.js' file in your scripts folder.
2. Link to jQuery and the 'flashlight.js' script to your HTML file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script src="scripts/jquery.flashlight.js">
3. Link to the plugin stylesheet.
<link rel="stylesheet" href="style/style.css">
4. 'flashlight.js' accepts 3 parameters as follows:
| Parameter | Format | Notes |
|---|---|---|
| Flashlight | Any integer with a positive value | Determines the diameter of the flashlight beam in pixels. |
| Darkness | Any value 0-1 | Determines the opacity of the flashlight shadow. |
| Gremlin | Boolean | If true, a gremlin will live on the page when the lights are turned off. |
5. In your main javascript file, call the function:
$(function() {
$('body').flashlight(flashlight, darkness, gremlin);
});