Sliding door avec CSS et Jquery

truitas · 9 Juin 2011

Bonjour à tous,

j'ai trouvé une animation sur image qui m'intéresse fortement: http://www.queness.com/post/620/create-a-stunning-sliding-door-effect-with-jquery

Demo: http://www.queness.com/resources/html/slicing/index.html

Par contre, je n'arrive pas à obtenir une position centrée sur ma page. Quels sont les éléments à modifier dans le CSS ?

merci d'avance.

Code HTML:

<div class="qitem">
    <a href="http://www.google.com"><img src="1.gif" alt="Test 1" title="" width="126" height="126"/></a>
    <span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</div>

CSS

body {
    font-family:arial; 
}

.qitem {
    /* width and height must be even number */
    width:126px;
    height:126px;  

    /* some styling for the item */
    border:4px solid #222; 
    margin:5px 5px 5px 0;
    background: url('bg.gif') no-repeat;

    /* make sure the four divs are hidden after changing the position */
    overflow:hidden;

    /* absolute position enabled for children elements*/
    position:relative;

    /* display item in single row */
    float:left;

    /* hand symbol for ie and other browser */
    cursor:hand; cursor:pointer;
}

    .qitem img {
        border:0;
    }

    /* styling for caption, position absolute is a must to set the z-index */
    .qitem .caption {
        position:absolute;
        z-index:0; 
        color:#ccc;
        display:block;
    }

        .qitem .caption h4 {
            font-size:12px;
            padding:10px 5px 0 8px;
            margin:0;
            color:#369ead;
        }

        .qitem .caption p {
            font-size:10px;
            padding:3px 5px 0 8px;
            margin:0;
        }



/* Generic setting for corners */
.topLeft, .topRight, .bottomLeft, .bottomRight {
    /* allow javascript to move the corners */
    position:absolute;
    background-repeat: no-repeat;
    z-index:200;
}

/* set the background position for different corners */
.topLeft {
    background-position: top left; 
}

.topRight {
    background-position: top right;
}

.bottomLeft {
    background-position: bottom left;
}

.bottomRight {
    background-position: bottom right;
}

.clear {
    clear:both;
}

Javascript:

$(document).ready(function() {

    //Custom settings
    var style_in = 'easeOutBounce';
    var style_out = 'jswing';
    var speed_in = 1000;
    var speed_out = 300;   

    //Calculation for corners
    var neg = Math.round($('.qitem').width() / 2) * (-1);  
    var pos = neg * (-1);  
    var out = pos * 2;

    $('.qitem').each(function () {

        //grab the anchor and image path
        url = $(this).find('a').attr('href');
        img = $(this).find('img').attr('src');

        //remove the image
        $('img', this).remove();

        //append four corners/divs into it
        $(this).append('<div class="topLeft"></div><div class="topRight"></div><div class="bottomLeft"></div><div class="bottomRight"></div>');

        //set the background image to all the corners
        $(this).children('div').css('background-image','url('+ img + ')');

        //set the position of corners
        $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});  
        $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});   
        $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});
        $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos}); 

    }).hover(function () {

        //animate the position
        $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});
        $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});   
        $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});  
        $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out}); 

    },

    function () {

        //put corners back to the original position
        $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});  
        $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});   
        $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});
        $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in}); 

    }).click (function () {

        //go to the url
        window.location = $(this).find('a').attr('href');  
    });

});