canvas-watch

canvas-watch es una biblioteca agnóstica de frameworks diseñada para manejar la detección de superposición 2D entre elementos flotantes (como barras de navegación fijas o reproductores anclados) y zonas desencadenantes de fondo. A diferencia de IntersectionObserver, que solo compara elementos contra su ancestro de desplazamiento o el viewport, canvas-watch compara rectángulos delimitadores para determinar sobre qué zona de fondo se encuentra actualmente un elemento flotante. Funcionalidades clave incluyen: - Alternancia automática de clases: Los elementos etiquetados como "observados" reciben una clase `over-*` según la zona desencadenante con la que más se superpongan (umbral predeterminado del 50%). - Soporte de anidamiento: Las zonas desencadenantes anidadas tienen prioridad sobre sus contenedores, permitiendo estilos más específicos en diseños complejos. - Seguimiento del viewport: Capacidad para rastrear reactivamente si un elemento de referencia está arriba, dentro, debajo o fuera del viewport. - Optimización de rendimiento: Utiliza un único bucle requestAnimationFrame e IntersectionObserver como puerta de visibilidad para asegurar que los cálculos de superposición solo se ejecuten para elementos en pantalla. - Sistema de eventos: Emite un evento personalizado `canvaschange` cada vez que cambia la clase aplicada, permitiendo lógica más allá del CSS. La biblioteca proporciona un núcleo agnóstico de frameworks y un adaptador dedicado para Svelte. Es seguro para SSR y compatible con todos los navegadores modernos de última generación.