KOMPOOS.NL

sliding door image

home » javascripts » image-effects » sliding-door-image.html

voorbeeld sliding door image

uitleg sliding door image

In de stylesheet zit het voorgrond-plaatje (2x) en in het javascript (5^e regel van onder) het achtergrond-plaatje. In de html-code zit alleen een "dummy png;base64" om het laden zo snel als mogelijk te doen. Het effect is duidelijk, en om de procedure op jouw webruimte te laten werken, moet je het script en de html-code in de body-, en de stylesheet in de head-sectie van jouw pagina plaatsen. De procedure is cross browser en valideert (W3C) op html5. Het javascript is foutloos volgens de JSLint-norm.

html code voor de sliding door procedure


<div class='sliding_door_container' onmouseover="door_openen();" onmouseout="door_sluiten();">
        <div id='slide_links'></div> 
        <div id='slide_rechts'></div>
        <img id="image_slide_een" src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCJljYAAAAAIAAfRxZKYAAAAASUVORK5CYII=' alt="sliding door effect" width="400" height="290" />
</div>

de stylesheet voor de image sliding door procedure


<style type="text/css">
        .sliding_door_container{
                margin-left:50px;
                position:relative;
                width:400px; 
                height:290px; 
                overflow:hidden}
        #slide_links{
                background:url(sliding-door-voorgrond.jpg);
                clip:rect(0px 200px 290px 0px);
                height:290px;
                width:400px;
                position:absolute;
                top:0px;
                left:-0%}
        #slide_rechts{
                background:url(sliding-door-voorgrond.jpg);
                clip:rect(0px 400px 290px 200px);
                height:290px;
                width:400px;
                position:absolute;
                top:0px;
                left:0%}
</style>

javascript sliding door image


<script type="text/javascript">
/*global document: false */
/*global clearInterval: false */
/*global setInterval: false */
/*global setTimeout: false */
var x_door, y_door, slide_image_x, slide_image_y, stop_slide_een, stop_slide_twee, procent_slide = 0,
    tijdelijk;
function slide_image_start() {
    slide_image_x = document.getElementById('slide_links');
    slide_image_y = document.getElementById('slide_rechts');
    slide_image_x.style.left = procent_slide + "%";
    slide_image_y.style.left = -procent_slide + "%";
    tijdelijk = procent_slide;
    if (procent_slide === -50) {
        clearInterval(stop_slide_een);
        return;
    }
    procent_slide = procent_slide - 1;
}
function slide_image_stop() {
    x_door = document.getElementById('slide_links');
    y_door = document.getElementById('slide_rechts');
    x_door.style.left = procent_slide + "%";
    y_door.style.left = -procent_slide + "%";
    if (procent_slide === 0) {
        clearInterval(stop_slide_twee);
        return;
    }
    procent_slide = procent_slide + 1;
}
function door_openen() {
    clearInterval(stop_slide_twee);
    tijdelijk = procent_slide;
    stop_slide_een = setInterval(function () {
        slide_image_start();
    }, 10);
}
function door_sluiten() {
    clearInterval(stop_slide_een);
    procent_slide = tijdelijk;
    stop_slide_twee = setInterval(function () {
        slide_image_stop();
    }, 1);
}
function laad_sliding_plaatje() {
    document.getElementById("image_slide_een").src = "sliding-door-achtergrond.jpg";
}
setTimeout(function () {
    laad_sliding_plaatje();
}, 100);
</script>