Je me suis enfin décidé à modifier la manière dont les animations qui révèlent les nouveaux articles / brèves se manifestent.

Avant, tout se révèlait en une fois, c'était moyen cool et induisait du lag sur certaines machines (genre partulièrement mon ancien ordi portable de dev., qui est retourné aux plus profonds des enfers dans sa maison de vacances, dieu merci).

Voir le refresh ici de la page "Brèves" (vidéos de moins 2 MB):

Et désormais:

J'ai ajouté un event listener pour les évènements de défilement qui détermine les éléments qui sont en actuellement en vue dans la fenêtre de navigateur, et applique l'animation à ces éléments-là uniquement, avec un délai incrémenté pour chaque élément.

Au départ je voulais un résultat un peu comme ce que j'ai fait sur ce pen:

Staggered animation

Mais en réagissant selon ce qui est visible à l'écran à ce moment là.

J'ai volé la majorité du code qui accomplit cette mission ici.

Plus sérieusement, il y a des librairies pour obtenir ce genre d'effets (je ne les utilise pas, mais ça a l'air cool!):

• http://michalsnik.github.io/aos/
• https://github.com/jlmakes/scrollreveal

Au niveau performances j'ai essayé toutes sortes de plans, y compris utiliser requestAnimationFrame (???) mais le mieux (selon moi et mon blog bizarre) c'est de pouvoir return au plus vite de l'observateur d'évènement de défilement s'il n'y a pas lieu de l'utiliser à ce moment-là.

Je vais jusqu'à return immédiatement si un observateur d'évènement est toujours en cours d'exécution, de sorte de n'en avoir qu'un seul qui effectue une quelconque réelle tâche à un moment donné.