عن المشروع

canvas-watch هي مكتبة غير مرتبطة بإطار عمل معين، مصممة للتعامل مع كشف التداخل ثنائي الأبعاد بين العناصر العائمة (مثل شريط التنقل الثابت أو مشغلات الوسائط المثبتة) ومناطق kíchيل الخلفية. على عكس IntersectionObserver، الذي يقارن العناصر فقط مع سياق التمرير أو viewport، فإن canvas-watch تقارن المستطيلات المحصورة لتحديد المنطقة الخلفية التي تقع عليها العنصر العائم حاليًا. الميزات الرئيسية تشمل: - تبديل الفئات تلقائيًا: العناصر الموسومة بـ "watched" تحصل على فئة `over-*` بناءً على منطقة التنشيط التي تتداخل معها أكثر (العتبة الافتراضية 50%). - دعم التداخل: المناطق المتداخلة ذات الأولوية على حاوياتها، مما يسمح بتنسيق أكثر تحديدًا في التخطيطات المعقدة. - تتبع viewport: القدرة على تتبع استجابي لما إذا كان العنصر المرجعي فوق، داخل، أسفل، أو خارج viewport. - تحسين الأداء: تستخدم حلقة واحدة requestAnimationFrame وIntersectionObserver كبوابة رؤية لضمان تشغيل حسابات التداخل فقط للعناصر الظاهرة على الشاشة. - نظام الأحداث: تطلق حدث `canvaschange` مخصصًا كلما تغيرت الفئة المطبقة، مما يمكّن من منطق يتجاوز CSS. توفر المكتبة نواة غير مرتبطة بإطار عمل ومحول مخصص لـ Svelte. وهي آمنة لـ SSR وتدعم جميع متصفحات الجيل الحديث.