প্রকল্প সম্পর্কে

canvas-watch একটি ফ্রেমওয়ার্ক-অজ্ঞাত লাইব্রেরি যা ভাসমান উপাদান (যেমন স্টিকি নেভিগেশন বার বা ডক করা প্লেযার) এবং পটভূমির ট্রিগার অঞ্চলের মধ্যে 2D ওভারল্যাপ সনাক্তকরণ পরিচালনা করতে ডিজাইন করা হযেছে। IntersectionObserver-এর বিপরীতে, যা শুধুমাত্র উপাদানগুলিকে তাদের স্ক্রল-পূর্বসূরি বা ভিউপোর্টের সাথে তুলনা করে, canvas-watch বাউন্ডিং আয়তক্ষেত্রগুলি তুলনা করে নির্ধারণ করে যে কোন পটভূমি অঞ্চলের উপর একটি ভাসমান উপাদান বর্তমানে অবস্থিত। প্রধান ক্ষমতাগুলি হল: - স্বয়ংক্রিয় ক্লাস টগলিং: "watched" হিসাবে ট্যাগ করা উপাদানগুলি তাদের সর্বাধিক ওভারল্যাপ করা ট্রিগার অঞ্চলের ভিত্তিতে `over-*` ক্লাস পায় (ডিফল্ট থ্রেশহোল্ড 50%)। - নেস্টিং সমর্থন: নেস্টেড ট্রিগার অঞ্চলগুলি াদের কন্টেইনারগুলির উপরে অগ্রাধিকার পায়, জটিল লেআউটে আরও নির্দিষ্ট স্টাইলিং সম্ভব করে। - ভিউপোর্ট ট্র্যাকিং: একটি রেফারেন্স উপাদান ভিউপোর্টের উপরে, ভিতরে, নিচে বা অনুপস্থিত কিনা তা রিএক্টিভলি ট্র্যা করার ক্ষমতা। - পারফরম্যান্স অপ্টিমাইজেশন: একটি একক requestAnimationFrame লুপ এবং IntersectionObserver ব্যবহার করে দৃশ্যমানতা গেট হিসাবে নিশ্চিত করে যে শুধুমাত্র স্ক্রিনে থাকা উপাদানগুলির জন্য ওভারল্যাপ গণনা চলে। - ইভেন্ট সিস্টেম: প্রয়োগকৃত ক্লাস পরিবর্তন হলে একটি `canvaschange` CustomEvent ডিসপ্যাচ করে, CSS-এর বাইরে লজিক সক্ষম করে। লাইব্রেরিটি একটি ফ্রেমওয়ার্ক-অজ্ঞাত কোর এবং একটি সমর্পিত Svelte অ্যাডাপ্টার প্রদান করে। এটি SSR-সুরক্ষিত এবং সমস্ত আধুনিক এভারগ্রিন ব্রাউজার সমর্থন করে।