canvas-watch

canvas-watch est une bibliothèque indépendante des frameworks conçue pour gérer la détection de chevauchement 2D entre des éléments flottants (comme des barres de navigation fixes ou des lecteurs ancrés) et des zones de déclenchement d'arrière-plan. Contrairement à IntersectionObserver, qui compare uniquement les éléments par rapport à leur ancêtre de défilement ou au viewport, canvas-watch compare les rectangles englobants pour déterminer quelle zone d'arrière-plan un élément flottant recouvre actuellement. Fonctionnalités clés : - Basculage automatique de classes : Les éléments marqués comme "observés" reçoivent une classe `over-*` selon la zone de déclenchement qu'ils chevauchent le plus (seuil par défaut : 50 %). - Prise en charge de l'imbrication : Les zones de déclenchement imbriquées ont la priorité sur leurs conteneurs, permettant un stylage plus précis dans les mises en page complexes. - Suivi du viewport : Capacité à suivre réactivement si un élément de référence se trouve au-dessus, à l'intérieur, en dessous ou hors du viewport. - Optimisation des performances : Utilise une seule boucle requestAnimationFrame et IntersectionObserver comme porte de visibilité pour s'assurer que les calculs de chevauchement ne s'exécutent que pour les éléments à l'écran. - Système d'événements : Déclenche un CustomEvent `canvaschange` chaque fois que la classe appliquée change, permettant une logique au-delà du CSS. La bibliothèque fournit un noyau indépendant des frameworks et un adaptateur dédié pour Svelte. Elle est compatible SSR et prend en charge tous les navigateurs modernes evergreen.