Bonjour,

Je viens vers vous pour avoir des précisions techniques. Voilà, j'ai un client qui souhaite avoir sur son site des transitions entre des images les plus fluides possibles. Dans cette optique, j'ai utilisé un plugin de type slider utilisant en priorité des animations css3, et quand celles-ci ne sont pas supportées, des animations classiques en js.

Je trouve le résultat convenable, il faut vraiment être très pointilleux pour ne pas être satisfait. Et je me dis que je suis parfois très pointilleux. C'est bien mais peut-être pas assez. Disons qu'à défaut d'être parfait, c'est bien, je trouve, objectivement. Mais voilà mon client a été particulièrement insistant sur ce point (fluidité "parfaite" des transitions) et j'ai l'impression d'avoir fait mon possible.

Ma question : les animations ne seraient-elles pas parfaitement fluides si je n'utilisais justement pas de plugin ?

Je construisais mon système de défilement avec uniquement ce dont j'ai besoin (chose que je ne sais pas faire). Mais peut-être que ce plugin est un peu gros pour ce que je veux faire. Toutefois il est bien pratique car responsive et tactile.

Et comment mesurer les performances de ces scripts en js via la console ?

Je pense également que le poids des images et le format peut-être optimisé. Est-ce qu'inclure un système de "lazy loading" ? Ou je me souviens de ce plugin imagesLoaded qui permettait d'utiliser des fonctions une fois seulement que les images chargées. Une image non-chargée peut-elle faire "ramer" une transition ?

Toutefois, pour la théorie, j'ai lu quelques articles sur "l'accélération matérielle" utilisée par css3. Donc, si je comprends bien, c'est la puissance de l'appareil sur lequel est consulté le site qui est utilisé pour les transitions. Est-ce que les animations css3 sont réellement plus rapide que celles en Jquery ?

Ah, et j'utilise un comportement mouseover sur une gallerie pour enclencher le défilement correspondant sur le slider :

$('.projectGoTo').mouseover(function(){
        //va au slide N°
    });

Mais voilà quand je bouge trop vite sur les miniatures de la gallerie / thumbnails, le comportement ne réagit pas et la transition n'a pas lieu. Comment rendre ce comportement mouseover plus nerveux ?

Enfin, comment avec un outil de type console (firebug ou sous chrome) peut-on mesurer efficacement ces performances ?

1 réponse


Je ne sais pas quelle méthode tu utilise pour tes transitions mais il semblerait que certains plugin règlent les problèmes de fluidité comme "transit.js" par exemple. J'ai déjà fais des tests en comparant une animation faite avec "animate" et une animation faite avec "transit" le tout sous chrome qui à tendance à bien ramer chez moi... j'avais quand même constaté une légère amélioration mais pas une fluidité parfaite.

J'ai aussi bien amélioré mes transitions en utilisant au maximum les callback ainsi que des méthodes comme ".promise()" qui permettent de différer l’exécution d'une ou plusieurs fonctions, de manière à ce que tout ne se passe pas en même temps.

Pour ton problème de mouseover, tu peux justement mettre en place un système qui "verouille" l'application tant que la transition n'est pas terminée.