Message En Bande Défilante

[Saphir]

Pour faire défiler la bannière, il est possible d'utiliser la balise <marquee>, qui fonctionnera sur certains navigateurs, ou d'utiliser la classe CSS3 suivante qui devrait fonctionner sur tous les navigateurs (sur une balise <div> ou <span>). Le code ci-dessous est à ajouter dans global.css.

Code :

/* @group Marquee */

.marquee {
    height: 30px;
    
    overflow: hidden;
    position: relative;
}
    .marquee div {
        display: block;
        width: 200%;
        height: 30px;
        
        position: absolute;
        overflow: hidden;
        
        -webkit-animation: marquee 4s linear infinite;
        -moz-animation: marquee 4s linear infinite;
        -ms-animation: marquee 4s linear infinite;
        -o-animation: marquee 4s linear infinite;
        animation: marquee 4s linear infinite;
    }
    .marquee span {
        float: left;
        width: 50%;
    }
    
@-webkit-keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
@-moz-keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
@-ms-keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
@-o-keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}
@keyframes marquee {
    0% { left: 0; }
    100% { left: -100%; }
}

/* @end */