FlashlightJs

by Jake Cattrall

HTML

<script src="https://rawgit.com/krazyjakee/Flashlight.js/master/flashlight.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.8.1/mustache.min.js"></script>
<div id="flashlight">
    <h3>CLICK!</h3>
    <img src="http://www.hexapolis.com/wp-content/uploads/2014/08/Stonehenge_curious_aspects_1.jpg" />
</div>

CSS

h3{
    color: white;
    position: absolute;
    z-index: 2
}
#flashlight{
    position: relative;
    float: left;
}
svg{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}

JavaScript

window.activeFlashlight = 0;
var fl = new Flashlight($('#flashlight'), {
    width: 210,
    height: 200,
    gradient: ["#888", "#aaa", "white"],
    lights: [
        {
            x: 0,
            y: 0
        }, {
            x: 200,
            y: 200
        }, {
            x: 400,
            y: 100
        }
    ]
});

$('#flashlight').click(function(e) {
    var x, y;
    x = e.offsetX;
    y = e.offsetY + $(window).scrollTop();
    $("[result=\"light" + activeFlashlight + "\"]").attr('dx', x - 100);
    $("[result=\"light" + activeFlashlight + "\"]").attr('dy', y - 100);
    window.activeFlashlight++;
    if (window.activeFlashlight > fl.lights.length - 2) {
        window.activeFlashlight = 0;
    }
});

return $('#flashlight').mousemove(function(e) {
    var x, y;
    x = e.offsetX;
    y = e.offsetY + $(window).scrollTop();
    $('[result="light' + (fl.lights.length - 1) + '"]').attr('dx', x - 100);
    $('[result="light' + (fl.lights.length - 1) + '"]').attr('dy', y - 100);
});