KOMPOOS.NL

spotlight effect

home » javascripts » image-effects » spotlight-effect.html

sitemap

KLIK HIER VOOR DE BRONCODE

javascript voor de spotlight procedure

<script>
/*global window: false */
/*global spotlight: false */
/*global fix_spotlight: false */
/*global reken_spotlight_uit: false */
/*global pageXOffset: false */
/*global pageYOffset: false */
var diameter_spotlight = 250;
var aantal_procenten_zichtbaar = 5;
var x_spotlight = 0;
var y_spotlight = 0;
var t;
var is_ie = document.all ? true: false;
function beweeg_spotlight(ev) {
    spotlight.filters.light.MoveLight(1, event.clientX + 
    (document.documentElement.scrollLeft), event.clientY + 
    (document.documentElement.scrollTop), diameter_spotlight, 1);
}
if (is_ie && spotlight.filters) {
    document.all.spotlight.onmousemove = beweeg_spotlight;
}
var t = true;
if (is_ie && spotlight.filters) {
    spotlight.filters.light.addAmbient(255, 255, 255, aantal_procenten_zichtbaar);
    spotlight.filters.light.addPoint(x_spotlight, y_spotlight, diameter_spotlight, 255, 255, 255, 255);
}
var de_img_tag,
ctx,
canvas,
de_radius,
de_interval,
x = 0,
y = 0,
gradient;
if (!is_ie) {
    window.addEventListener("load",
    function() {
        de_img_tag = document.getElementsByTagName('img')[0];
        canvas = document.createElement('canvas');
        canvas.style.background = "url(" + de_img_tag.src + ")";
        ctx = canvas.getContext('2d');
        canvas.width = screen.width - 30;
        canvas.height = screen.height + 2000;
        de_radius = 250;
        de_img_tag.parentNode.replaceChild(canvas, de_img_tag);
        fix_spotlight(0, 0, canvas.width, canvas.height);
        gradient = ctx.createRadialGradient(0, 0, 0, 0, 0, de_radius);
        gradient.addColorStop(0, "rgba(255,255,255,1)");
        gradient.addColorStop(0.1, "rgba(255,255,255,0.9)");
        gradient.addColorStop(0.9, "rgba(255,255,255,0.05)");
        gradient.addColorStop(1, "rgba(255,255,255,0)");
        canvas.addEventListener('mouseover',
        function(ev) {
            de_interval = setInterval(reken_spotlight_uit, 20);
        },
        false);
        canvas.addEventListener('mousemove',
        function(ev) {
            x = (pageXOffset + ev.clientX) - ev.target.offsetLeft - 10;
            y = (pageYOffset + ev.clientY) - ev.target.offsetTop - 15;
        },
        false);
        canvas.addEventListener('mouseout',
        function(ev) {
            clearInterval(de_interval);
            fix_spotlight(0, 0, canvas.width, canvas.height);
        },
        false);
    },
    false);
    function fix_spotlight(xc, yc, wc, hc) {
        if (xc < 0) {
            xc = 0;
        }
        if (yc < 0) {
            yc = 0;
        }
        ctx.save();
        ctx.beginPath();
        ctx.globalCompositeOperation = "source-over";
        ctx.fillStyle = "rgba(0,0,0,0.88)";
        ctx.clearRect(xc, yc, wc, hc);
        ctx.fillRect(xc, yc, wc, hc);
        ctx.closePath();
        ctx.restore();
    }
    var x_oud = 0;
    var y_oud = 0;
    var math_pi = 0;
    function reken_spotlight_uit() {
        fix_spotlight(x_oud - de_radius, y_oud - de_radius, 2 * de_radius, 2 * de_radius);
        ctx.save();
        ctx.beginPath();
        math_pi += Math.PI / 12;
        ctx.globalCompositeOperation = "destination-out";
        ctx.fillStyle = gradient;
        ctx.translate(x, y);
        ctx.arc(0, 0, de_radius, 0, 2 * Math.PI, false);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
        x_oud = x;
        y_oud = y;
    }
}
</script>

Gebruik voor alle voorbeelden op de http://kompoos.nl een valide html5 pagina.