KOMPOOS.NL

camera lens effect

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

sitemap

uitleg lens effect procedure

Als jouw javascript ingeschakeld staat, zal het lens-effect jou niet ontgaan zijn. Er is niet veel uit te leggen over deze procedure. Plaats de stylesheet in de head-sectie van de pagina, het javascript in de body-sectie (zo laag als mogelijk), en plaats de html-code ergens in de body-sectie van jouw pagina. Het hele gebeuren is valide HTML5, en JSLint zet het javascript "in het groen". Om deze procedure even makkelijk te kunnen testen, voeg ik de op deze pagina gebruikte afbeeldingen even toe. Dat zijn: http://kompoos.nl/javascripts/image-effects/lens-1.png, http://kompoos.nl/javascripts/image-effects/lens-2.png, http://kompoos.nl/javascripts/image-effects/lens-3.png en http://kompoos.nl/javascripts/image-effects/lens.png.

javascript voor het lens-effect


<script>
/*global window: false */
/*global css: true */
var effect_lens = {
    cx: 0,
    cy: 0,
    lx: 0,
    ly: 0,
    px: 0,
    py: 0,
    objekt: 0,
    maximaal: 300,
    init: function() {
        this.objekt = document.getElementById('effect_lens_gebied');
        this.resize();
        this.lx = this.cx / 2;
        this.ly = this.cy / 2;
    },
    mousemove: function(e) {
        if (window.event) {
            e = window.event;
        }
        this.lx = (e.x || e.clientX);
        this.ly = (e.y || e.clientY);
    },
    resize: function() {
        effect_lens.cx = effect_lens.objekt.offsetWidth * 0.5;
        effect_lens.cy = effect_lens.objekt.offsetHeight * 0.5;
    },
    draw: function() {
        effect_lens.px -= (effect_lens.px - effect_lens.lx) * 0.1;
        effect_lens.py -= (effect_lens.py - effect_lens.ly) * 0.1;
        effect_lens.lens_effect('lenseffect_1', 0.7, 1, 0, 0);
        effect_lens.lens_effect('lenseffect_2', 0.5, 2, 0, 0);
        effect_lens.lens_effect('lenseffect_3', 0.3, 3, 0, 0);
        effect_lens.lens_effect('lenseffect_4', 0.2, 10, 0, 0);
        effect_lens.lens_effect('lenseffect_5', 0.7, -1, 0, 0);
        effect_lens.lens_effect('lenseffect_6', 0.5, -2, 0, 0);
        effect_lens.lens_effect('lenseffect_7', 0.3, -3, 0, 0);
        effect_lens.lens_effect('lenseffect_8', 1.0, -0.7, 0, 0);
        setTimeout(effect_lens.draw, 24);
    },
    lens_effect: function(id, schaal, afstand, x, y) {
        var vx = (this.cx - this.px) / afstand;
        var vy = (this.cy - this.py) / afstand;
        var d = this.maximaal * schaal;
        css = document.getElementById(id).style;
        css.top = Math.round(vy - (d * 0.5) + this.cy + y) + 'px';
        css.left = Math.round(vx - (d * 0.5) + this.cx + x) + 'px';
        css.width = Math.round(d) + 'px';
        css.height = Math.round(d) + 'px';
    }
};
var start_lens_effect = function() {
    effect_lens.init();
    effect_lens.draw();
    document.onmousemove = function(e) {
        if (window.event) {
            e = window.event;
        }
        effect_lens.mousemove(e);
    };
    window.onresize = effect_lens.resize();
};

setTimeout(function() {
    start_lens_effect();
}, 500);
</script>

stylesheet voor de lens procedure


<style type="text/css">
        #lenseffect_1,#lenseffect_2,#lenseffect_3,#lenseffect_4,#lenseffect_5,#lenseffect_6,#lenseffect_7{
                position:absolute;}
        #lenseffect_8{
                position:relative;}
        #effect_lens_gebied{
                position:absolute;
                left:10%;z-index:-1
                height:100%}
        .lens_transparant{
                filter:alpha(opacity=20);
                opacity:0.2;
                position:absolute}
</style>

html code voor het "lens-gebeuren"


<div id="effect_lens_gebied">
        <img id="lenseffect_1" class="lens_transparant" src="lens-1.png" /> 
        <img id="lenseffect_2" class="lens_transparant" src="lens-2.png" /> 
        <img id="lenseffect_3" class="lens_transparant" src="lens-3.png" /> 
        <img id="lenseffect_4" class="lens_transparant" src="lens-2.png" /> 
        <img id="lenseffect_5" class="lens_transparant" src="lens-1.png" />
        <img id="lenseffect_6" class="lens_transparant" src="lens-2.png" /> 
        <img id="lenseffect_7" class="lens_transparant" src="lens-3.png" />
        <img id="lenseffect_8" src="lens.png" />
</div>