L’effet de chronophotographie animé repose sur un principe simple, même si ça peut être un peu délicat à mettre en œuvre avec une source vidéo en direct.

Cet article présente une astuce pour l’appliquer à une animation de type gif, c’est à dire sur une petite série d’image, et l’animer avec javascript.

Voici le principe : on place les images dans une liste d’objets disposés en ligne. À chaque fois qu’on souhaite faire avancer l’animation, il suffit de prendre le premier élément de la liste et de le placer après le dernier.

En utilisant jQuery, ça tient en trois lignes :

var first = $('.container').find('.anim-item).first();
var last = $('.container').find('.anim-item).last();
last.after(first);

Où ‘.container’ est la classe du div qui contient les div ‘.anim-item’ qui contiennent chacun une image.

Pour animer en continu, on peut utiliser la fonction suivante :

function anim(delay) {
  setTimeout(function(){
    var first = $('.container').find('.img-item).first();
    var last = $('.container').find('.img-item).last();
    last.after(first);
    anim(delay);
  }, delay);
}

Il suffit d’appeler une fois cette fonction anim() après avoir chargé les images. Le paramètre -delay- correspond au temps de rafraîchissement de l’image en ms.