Rodrigue Hunel

Cet article est la traduction de : Sliding Boxes and Captions with jQuery. Il a pour but de vous montrer comment créer des boîtes ou des légendes coulissantes avec la bibliothèque JavaScript jQuery.

Le principe

Toutes les animations de boîtes coulissantes fonctionnent sur le même principe. Une balise div (avec la classe CSS boxgrid) qui agit essentiellement comme une fenêtre dans laquelle deux autres éléments de votre choix se déplacent.

Est-ce confus ? Si oui, voici un schéma qui vous aidera à comprendre.

En se basant sur ce principe, nous pouvons jouer avec les animations autour de l'élément coulissant, soit afficher ou masquer la zone de visualisation, créant ainsi un effet de glissement.

Visualisez un exemple en ligne.
Téléchargez la source complète.

Étape 1 : La base CSS

Compte tenu de la structure décrite par l'image ci-dessus, nous devrons utiliser un peu de CSS pour que le fonctionnement prévu corresponde à nos attentes. Le code qui va suivre est complètement fonctionnel et disponible dans l'archive téléchargeable.

Le CSS qui suit définit la fenêtre de visualisation .boxgrid et la position, par défaut, des images à l'intérieur (plus précisément en haut à gauche) de la précédente fenêtre. Il faut garder à l'esprit que le calque doit coulisser pendant le chevauchement et que tout ceci est possible grâce à l'utilisation de la propriété CSS overflow définie à hidden.

.boxgrid {  
    width:325px;  
    height:260px;  
    margin:10px;  
    float:left;  
    background:#161613;  
    border:solid 2px #8399AF;  
    overflow:hidden;  
    position:relative;  
}  
.boxgrid img {  
    position:absolute;  
    top:0;  
    left:0;  
    border:0;  
}

Si vous ne souhaitez pas utiliser d'effet de transparence pour les légendes alors dirigez-vous vers l'étape 2.

.boxcaption {  
    float:left;  
    position:absolute;  
    background:#000;  
    height:100px;  
    width:100%;  
    opacity:.8;  
    /* Pour IE 5-7 */  
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);  
    /* Pour IE 8 */  
    -MS-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";  
}

La mise en application d'un effet de transparence, représenté en CSS par la propriété opacity, compatible avec tous les navigateurs est un vaste sujet. Renseignez-vous si vous avez besoin.

Maintenant, il nous faut positionner le point de départ, par défaut, de l'animation de la zone contenant la légende. Si vous voulez la cacher complètement, la distance entre le haut ou la gauche doit correspondre à la hauteur ou la largeur de la fenêtre (.boxgrid), selon la direction dans laquelle il coulisse. Vous pouvez également le rendre visible par défaut avec l'utilisation conjointe des classes .caption et .boxcaption.

.captionfull .boxcaption {  
    top:260px;  
    left:0;  
}  
.caption .boxcaption {  
    top:220px;  
    left:0;  
} 

Étape 2 : Les animations

Cette étape est une question de choix d'animation. Je vous propose une série d'animations pré-formatées qui sont là pour vous aider à faire votre choix. Amusez-vous avec elles pour trouver celle qui vous convient.

$(document).ready(function() {  
    // Pour changer la direction haut/bas et gauche/droite, placez seulement  
    // le caractère "-" devant la valeur de la propriété top/left  
    // Coulissement vertical  
    $('.boxgrid.slidedown').hover(function() {  
        $(".cover", this).stop().animate( {  
            top : '-260px'  
        }, {  
            queue : false,  
            duration : 300  
        });  
    }, function() {  
        $(".cover", this).stop().animate( {  
            top : '0px'  
        }, {  
            queue : false,  
            duration : 300  
        });  
    });  
    // Coulissement horizontal  
    $('.boxgrid.slideright').hover(function() {  
        $(".cover", this).stop().animate( {  
            left : '325px'  
        }, {  
            queue : false,  
            duration : 300  
        });  
    }, function() {  
        $(".cover", this).stop().animate( {  
            left : '0px'  
        }, {  
            queue : false,  
            duration : 300  
        });  
    });  
    // Coulissement diagonal  
    $('.boxgrid.thecombo').hover(function() {  
        $(".cover", this).stop().animate( {  
            top : '260px',  
            left : '325px'  
        }, {  
            queue : false,  
            duration : 300  
        });  
    }, function() {  
        $(".cover", this).stop().animate( {  
            top : '0px',  
            left : '0px'  
        }, {  
            queue : false,  
            duration : 300  
        });  
    });  
    // Petit coulissement (Montre seulement une partie du fond)  
    $('.boxgrid.peek').hover(function() {  
        $(".cover", this).stop().animate( {  
            top : '90px'  
        }, {  
            queue : false,  
            duration : 160  
        });  
    }, function() {  
        $(".cover", this).stop().animate( {  
            top : '0px'  
        }, {  
            queue : false,  
            duration : 160  
        });  
    });  
    // Coulissement intégral (De caché à visible)  
    $('.boxgrid.captionfull').hover(function() {  
        $(".cover", this).stop().animate( {  
            top : '160px'  
        }, {  
            queue : false,  
            duration : 160  
        });  
    }, function() {  
        $(".cover", this).stop().animate( {  
            top : '260px'  
        }, {  
            queue : false,  
            duration : 160  
        });  
    });  
    // Coulissement de légende (Une partie cachée à visible)  
    $('.boxgrid.caption').hover(function() {  
        $(".cover", this).stop().animate( {  
            top : '160px'  
        }, {  
            queue : false,  
            duration : 160  
        });  
    }, function() {  
        $(".cover", this).stop().animate( {  
            top : '220px'  
        }, {  
            queue : false,  
            duration : 160  
        });  
    });  
});

Étape 3 : Le HTML

Il y a quelques classes que nous avons créées tout simplement pour faciliter l'utilisation avec jQuery.

Gardez à l'esprit ces règles

• La classe .cover doit être attribuée à l'élément qui coulisse. Dans notre exemple c'est la balise div ;
• La balise img doit toujours être la première chose définie à l'intérieur du div de classe .boxgrid.

Voici un exemple HTML dans lequel j'utilise la classe .captionfull pour l'animation :

<div class="boxgrid captionfull">  
    <img src="jareck.jpg" alt=""/>  
    <div class="cover boxcaption">  
        <h3>Jarek Kubicki</h3>  
        <p>  
            Artiste  
            <br/>  
            <a href="http://www.nonsensesociety.com/2009/03/art-by-jarekkubicki/" target="_blank">Voir plus</a>  
        </p>  
    </div>  
</div> 

Visualisez un exemple en ligne.
Téléchargez la source complète.

À votre tour de créer

J'ai seulement évoqué quelques options que nous avons parmi tant d'autres. Ces boîtes sont vos toiles, à vous de créer maintenant. Je vous encourage à télécharger les fichiers attachés, car il sera plus facile pour vous de copier-coller les éléments dont vous aurez besoin.

Dernière mise à jour : 28 févr. 2011 à 02:14