Réalisez un bandeau de news en jQuery, comme sur iTélé

Je ne sais pas pour vous, mais moi, dès que je regarde une chaine d'information, je suis hypnotisé par les barres de news qui défilent en bas de l'écran. Je n'arrive pas à en détacher les yeux. Personnellement, je trouve celles de iTélé particulèrement réussies.

Je me suis dit que ce traitement des brèves infos pouvait être une belle manière d'annoncer les mises à jour d'un site web. Bien évidement en tant qu'obsédé de jQuery, je me suis amusé à réaliser un effet similaire. Le voici.

Voir la Démo

Ce que je veux

Je veux que mon plugin soit le plus inobstrusif possible et puisse s'appliquer à du code HTML sémantique. Les listes de définitions DL, DT et DD sont lesplus adaptées à la présentation de news : Propre et facile à mettre à jour.

<dl id="iTvScroller">
    <dt>Corse</dt>
    <dd>Un jeune touriste tué par balle par un videur de discotheque a Olmeto Plage</dd>
    
    <dt>Faits divers</dt>
    <dd>Accident d'ULM dans le Doubs : deux blessés</dd>
    
    <dt>Formule 1</dt>
    <dd>Le Français Sébastien Bourdais écarté de l'écurie Toro Rosso</dd>
    
    <dt>Inflation</dt>
    <dd>Nouvelle baisse des prix sur un an (-0,5%) en juin</dd>
    
    <dt>Honduras</dt>
    <dd>Le gouvernement rétablit un couvre-feu</dd>
</dl>

Une fois notre liste mis en place, il faut la faire ressembler à ça :

Mise en forme

Une fois n'est pas coutume, je vais commencer à me présenter la feuille de styles. Il est à noter que la liste porte l'id #iTvScroller. Toutes les news seront masquées, sauf la première. Le premier DT portera la classe .first, le deuxième la classe .second. Ces modifications seront effectuées par le script lui-même.

Quatre fonds d'images sont utilisées pour les titres. Elles se nomment selon leurs couleurs, respectivement red.png pour le premier titre, red-black.png pour le second titre, black-black.png pour tous les autres boutons et black.png pour la barre de titre.

Maintenant vous devriez y voir plus clair dans la feuille de style qui suit. J'y ai ajouté quelques annotations.

#iTvScroller {
    background:#000 url('images/black.png') repeat-x top left;
    font:14px "Trebuchet MS", Tahoma, sans-serif;
    margin:0;
    width:100%; height:80px;
    /* Position en bas de l'écran */
    position:fixed; left:0; bottom:0; 
}
#iTvScroller dt {
    color:#999;
    font-weight:bold;
    line-height:30px;
    height:30px;
    padding:0 20px 0 30px;
    /* Les titres ont un fond noir */
    background:#000 url('images/black-black.png') center left;  
    /* Les titres sont mis côte-à-côte */
    float:left;  
}
#iTvScroller dd {
    color:#FFF;
    font-size:150%;
    font-weight:bold;
    height:50px; line-height:50px;
    margin:0;
    padding:0 30px;
    position:absolute; bottom:0; left:0;
    /* Les textes sont masqués par défaut */
    display:none;
}
#iTvScroller dt.first {
    color:#FFF;
    /* Le 1er titre aura un fond rouge */
    background:#FF0000 url('images/red.png');
}
#iTvScroller dt.second {
    /* Le 2ème titre aura un fond rouge et une partie noire */
    background:#FF0000 url('images/red-black.png') center left;
}

Le plugin en question

Tapons directement dans le vif du sujet avec la totalité du plugin, agrémenté de quelques commentaires. Je reviens en détail par la suite sur les points clés.

/**
 * Un bandeau de news en jQuery, comme sur iTélé
 * par Jay Salvat - http://blog.jaysalvat.com/
 */
(function($) {
$.fn.iTvScroller = function(settings) {
    // Options
    var options =  {
        delay: 5000
    };
    $.extend(options, settings);
        
    return this.each(function(){
        var $$ = $(this);
        
        // Applique les classes au 1er et 2ème DT
        $('dt', $$)
            .eq(1).addClass('second').end()
            .eq(0).addClass('first');

        // Fait apparaitre doucement la première news
        $('dd', $$).eq(0).fadeIn('slow');
        
        // Appelle la méthode scrollTitles() toutes les x secondes
        setInterval(scrollTitles, options.delay);
        
        function scrollTitles() {
            // Traitement des DD
            $('dd', $$)
                // On les masque tous
                .hide()
                // On réaffiche celui qui nous intéresse : le suivant
                .eq(1).fadeIn('slow');

            // Traitement des DT
            $('dt', $$)
                // On réinitialise les classes de tous les titres
                .removeClass('first')
                .removeClass('second')
                // On réapplique les classes au 1er, 2ème et 3ème titre
                .eq(2).addClass('second').end()
                .eq(1).addClass('first').end()
                .eq(0).addClass('first')
                // Puis on déplace les titres vers la gauche
                .animate( { marginLeft : '-150px'}, 1000, function() {

                    // Lorsque le déplacement est termine le 1er DT ne nous intéresse plus
                    var dt = $('dt', $$).eq(0)
                        // On réinitialise la marge à gauche
                        .css('marginLeft', 0)
                        // On supprime la classe
                        .removeClass('first')
                        // On le supprime
                        .remove();

                    // On supprime également le DD
                    var dd = $('dd', $$).eq(0).remove();

                    // On repose le DT et DD à la suite des autres titres
                    $$.append( dt.hide().fadeIn('slow'), dd );
                }
            )
        }    
    });
};
})(jQuery);

Dissection

Bon, maintenant que vous êtes experts en plugin jQuery, je ne reviens plus sur le B-A BA.

$('dt', $$)
    .eq(1).addClass('second').end()
    .eq(0).addClass('first');

On commence par appliquer les classes .first et .second aux titres.

$('dd', $$).eq(0).fadeIn('slow');

Puis on affiche la première news en fadeIn.

setInterval(scrollTitles, options.delay);

La fonction setInterval lance scrollTitles() à intervalle régulier. Cet intervalle est défini par l'utilisateur dans les options. Par défaut 5000, soit 5 secondes. Intéressons-nous maintennat à la fonction scrollTitles() qui se charge du roulement des news.

$('dd', $$)
    .hide()
    .eq(1).fadeIn('slow');

Toutes les news sont masquées. On affiche la suivante dans un joli fadeIn.

$('dt', $$)
    .removeClass('first')
    .removeClass('second')

Les classes .first et .second sont enlevés des titres pour repartir à zéro.

$('dt', $$)
    // ...
    .eq(2).addClass('second').end()
    .eq(1).addClass('first').end()
    .eq(0).addClass('first')

Le déplacement vers la gauche ne s'est pas encore produit. On applique les classes .first aux deux premiers titres et .second au troisième.

$('dt', $$)
    // ...
    .animate( { marginLeft : '-150px'}, 1000, function() { }

La rangée de titres est maintenant déplacée vers la gauche de 150px en 1 seconde (1000). Une fois l'animation terminée, la fonction anonyme passée en paramètre est lancée. Regardons ce qui s'y passe.

var dt = $('dt', $$).eq(0)
   .css('marginLeft', 0)
   .removeClass('first')
   .remove();

Le titre maintenant disparu hors écran est réinitialisé, on supprime la classe .first et on remet la marge gauche à zéro puis on le supprime complétement de la page.
Remarquez que ce titre est stocké au préalable dans la variable dt.

var dd = $('dd', $$).eq(0).remove();

Même chose pour le news en cours. Elle est supprimée mais stockée dans la variable dd.

$$.append( dt.hide().fadeIn('slow'), dd );

Le titre et la news précédemment stockés sont ajoutés à la fin de la liste afin qu'ils réapparaissent en boucle.

Télécharger le code

Usage

Organisez vos news dans une liste type définition DL, DT, DD. Appliquez-y par exemple l'id #iTvScroller.

<dl id="iTvScroller">
    <dt>Titre 1</dt>
    <dd>New 1</dd>
    
    <dt>Titre 2</dt>
    <dd>News 2</dd>
</dl>

Ensuite vous connaissez la rengaine. Il faut inclure jQuery et appliquer le plugin à votre liste.

<script type="text/javascript" >
$(function() {
    $('#iTvScroller').iTvScroller();
});
</script>

Le tour est joué.