canvas-watch

canvas-watch — это независимая от фреймворков библиотека, предназначенная для обнаружения 2D-перекрытия между плавающими элементами (например, прилипающими навигационными панелями или закрепленными плеерами) и фоновыми триггерными зонами. В отличие от IntersectionObserver, который сравнивает элементы только с их прокручиваемым предком или областью просмотра, canvas-watch сравнивает ограничивающие прямоугольники, чтобы определить, над какой фоновой зоной в данный момент находится плавающий элемент. Ключевые возможности: - Автоматическое переключение классов: Элементы, помеченные как "наблюдаемые", получают класс `over-*` на основе зоны триггера, с которой они перекрываются больше всего (порог по умолчанию — 50%). - Поддержка вложенности: Вложенные зоны триггера имеют приоритет над своими контейнерами, что позволяет применять более специфичное стилизование в сложных макетах. - Отслеживание области просмотра: Возможность реактивно отслеживать, находится ли ссылочный элемент выше, внутри, ниже или вне области просмотра. - Оптимизация производительности: Использует один цикл requestAnimationFrame и IntersectionObserver в качестве ворот видимости, чтобы математика перекрытия выполнялась только для элементов на экране. - Система событий: Генерирует пользовательское событие `canvaschange` при каждом изменении применяемого класса, позволяя реализовать логику за пределами CSS. Библиотека предоставляет ядро, независимое от фреймворков, и специальный адаптер для Svelte. Она безопасна для SSR и поддерживает все современные браузеры.