KOMPOOS.NL

image effect - javascript

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

sitemap

voorbeeld image (special) effect

uitleg image effect

html regel voor het special effect

<a href="/javascripts/image-effects/image-effect.html"><address></address></a>

javascript voor het image effect

<script>
var effect_plaatje_is = "http://static.dns5.nl/special-effect.png";
var config;
var de_snelheid = 50;
var img,
special_effect,
een_image_effect,
special_effect;
function position() {
    for (var i = 0, length = arguments.length; i < length;++i) {
        arguments[i].top = arguments[i].left = "0px";
        arguments[i].position = "absolute";
    }
}
function effect_lader(config) {
    var div = config.target.getElementsByTagName("div"),
    een_image_effect = div[0],
    img = config.document.createElement("img"),
    $image__effect = een_image_effect.style,
    $div = div.style,
    special_effect = img.style,
    width = parseInt($image__effect.width, 10),
    height = parseInt($image__effect.height, 10),
    scale = 2000,
    left,
    top,
    $;
    div = div[1];
    position(special_effect);
    special_effect.zIndex = 2;
    $div.backgroundPosition = config.direction || "left";
    scale /= 100;
    img.onload = function() {
        img.setAttribute("width", width);
        img.setAttribute("height", width = round(scale * height));
        special_effect.top = (top = -width + height) + "px";
        left = 0;
        scale = de_snelheid / scale;
        config.interval = setTimeout(config.roephem = function() {
            if (top + left < height) {
                top += de_snelheid;
                special_effect.top = round(top + left) + "px";
                if ( - height < ($ = round(left -= scale))) {
                    $div.height = (height + $) + "px";
                }
                config.interval = setTimeout(config.roephem, 15);
            } else {
                onload();
            }
        }, 15);
    };
    een_image_effect.insertBefore(img, div);
    img.src = config.src;
}
 (function(round, window) {
    function onload(config) { (function onload() {
            een_image_effect.removeChild(img);
            img = special_effect = null;
            config.interval = 0;
            config.roephem = config.pause = config.play = null;
            if (config.callback) {
                config.callback(config);
            }
        })
            var een_image_effect = config.target.appendChild(config.document.createElement("div")),
        div = een_image_effect.cloneNode(true),
        width = this.width,
        height = this.height,
        img = this,
        $image__effect = een_image_effect.style,
        $div = div.style,
        special_effect = img.style,
        scale = 2000,
        left,
        top,
        $;
        position($div, special_effect);
        $image__effect.position = "relative";
        $image__effect.width = width + "px";
        $image__effect.height = height + "px";
        $image__effect.overflow = "hidden";
        special_effect.zIndex = 2;
        $div.zIndex = 3;
        scale /= 100;
        $div.height = 0 + "px";
        $div.width = width + "px";
        special_effect.top = (top = height) + "px";
        img.setAttribute("width", width);
        img.setAttribute("height", round(scale * height));
        left = 0;
        scale = de_snelheid / scale;
        config.interval = setTimeout(config.roephem = function() {
            if (left < height) {
                top -= de_snelheid;
                special_effect.top = round(top + left) + "px";
                if (top < 0) {
                    $div.height = round(left += scale) + "px";
                }
                config.interval = setTimeout(config.roephem, 1);
            } else {
                onload();
            }
        }, 15);
        $div.background = (config.background || "transparent") + " url(" + config.src + ") no-repeat " + (config.direction || "left");
        een_image_effect.appendChild(img);
        een_image_effect.appendChild(div);
    }
    function special_effect(config) {
        if (config.achterstevoren) {
            effect_lader(config);
        } else {
            var img = (config.document || (config.document = document)).createElement("img");
            img.onload = function() {
                img.removeAttribute("onload");
                if (config.onload) {
                    config.onload(img);
                }
                onload.call(img, config);
            };
            img.src = config.src;
            config.pause = function() {
                clearTimeout(config.interval);
            };
            config.play = function() {
                config.interval = setTimeout(config.roephem, 15);
            };
        }
        return config;
    }
    window.special_effect = special_effect;
})(Math.round, window);
start_image_effect = function() {
    var hetadres = document.getElementsByTagName("address"),
    bottom = hetadres[0];
    special_effect({
        src: effect_plaatje_is,
        target: bottom,
        direction: "bottom",
        callback: function(config) {}
    });
};
window.onload = start_image_effect;
</script>

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