Simuler un marquee en HTML5

Et oui, le bon vieux <marquee> n’est pas compatible HTML5. Et avec WEDOGOOD, nous avons pas mal de partenaires…

Du coup, au début, j’étais parti sur une vieille tactique en jQuery qui donnait à peu près ça :

restartPartners: function() {
  var endMarginLeft = 0;
  if ($(".partners_zone a").css("margin-left").replace("px", "") == 0) endMarginLeft = $(".partners_zone").width() - $(".partners_zone a").width();
  $(".partners_zone>a").animate(
    {marginLeft: endMarginLeft}, 
    30000, 
    "linear",
    function() {
      restartPartners();
    }
  );
}

Ca fonctionnait mais le processeur aimait pas trop, et surtout il y avait une petite fuite mémoire qui était un peu gênante. Du coup, j’ai fouillé, et j’ai trouvé ça, en CSS :

.partners_zone {
    width: 960px;
    overflow-x: hidden;
}
.partners_zone a {
    animation: marquee 30s linear infinite;
    -webkit-animation: marquee 30s linear infinite;
}
@keyframes marquee{
    0%   { margin-left: 0px }
    100% { margin-left: -2175px }
}
@-webkit-keyframes marquee {
    0%   { margin-left: 0px }
    100% { margin-left: -2175px }
}

A priori, les IE < 10 ne le gèrent pas… Mais bon, on va s’en passer 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *