Awesome GitHub RepositoriesIntersection Observer Implementations

AOS is a scroll-triggered animation library that controls the execution, timing, and mapping of CSS transitions based on element visibility and browser viewport intersections. It functions as a DOM element animation controller and a viewport intersection trigger to initiate visual transitions as elements enter the screen. The library utilizes a custom CSS transition bridge to map scroll-based triggers to CSS class changes, enabling integration with external styling frameworks. It supports anchor-based animation triggers, allowing the visibility of one page element to act as the trigger point

ScrollReveal is a client-side JavaScript library used to trigger CSS animations and transitions for page elements as they enter the browser viewport. It functions as a DOM element animation trigger and a simplified wrapper for the Intersection Observer API to coordinate visual entrance effects and staggered animations based on the user's scroll position. The library focuses on scroll-driven motion and reveal effects, enabling the execution of visual changes and animations automatically as a user navigates a website. It manages the reveal of page content to create movement and progression with

vue-lazyload is a Vue.js image lazy loading plugin and frontend asset optimizer. It serves as a viewport visibility observer that defers the loading of images and components until they enter the browser viewport to reduce initial page load times. The project functions as a progressive image loader by managing image placeholders and implementing dynamic source switching. It uses a browser API to monitor when elements enter the viewport, avoiding expensive scroll event listeners to maintain performance. The plugin provides capabilities for image loading state tracking, including custom placeho

هذا المشروع عبارة عن مكتبة JavaScript بسيطة ومحسن لأداء الويب مصمم لتأجيل تحميل الصور، ومقاطع الفيديو، وiframes حتى تدخل في إطار عرض المتصفح (viewport). يعمل كغلاف لمراقب التقاطع (intersection observer) ومحمل وسائط متكيف لتقليل أوقات تحميل الصفحة الأولية وتوفير النطاق الترددي. تتميز المكتبة بدعم الصور المتجاوبة عبر srcset ووسوم picture، بالإضافة إلى صور خلفية CSS وSVG المتحركة. تتكامل مع سمات التحميل الأصلية للمتصفح حيثما توفرت مع توفير بدائل مخصصة للبيئات غير المدعومة. يمكنها أيضاً تشغيل تنفيذ دوال JavaScript معينة بناءً على رؤية العنصر. تغطي القدرات الواسعة إدارة أصول الواجهة الأمامية مع دعم استهداف حاوية التمرير المخصصة ومراقبة المحتوى الديناميكي للعناصر المحقونة بشكل غير متزامن. تدير الأداة أيضاً موثوقية الشبكة من خلال معالجة أخطاء تحميل الأصول وإلغاء التنزيلات النشطة للعناصر التي تخرج من إطار العرض قبل الاكتمال.

usehooks-ts is a comprehensive collection of reusable TypeScript-based hooks designed for managing state, DOM events, and browser API interactions within React applications. It provides a typed library of functions to handle common frontend patterns and side effects. The project distinguishes itself by offering specialized hooks for browser integration, including tools for interacting with the system clipboard, managing local and session storage persistence, and loading external scripts. It also includes utilities for responsive UI development, such as tracking media queries, window dimension

هذا المشروع هو مكون تحميل كسول (lazy loading) لـ React مصمم لتحسين أداء الواجهة الأمامية عن طريق تأجيل عرض العناصر الفرعية حتى تدخل في إطار عرض المتصفح. يعمل كمدير لدورة حياة الموارد ومحفز للرؤية، مما يمنع التحميل غير الضروري للمكونات خارج الشاشة لتقليل أوقات تحميل الصفحة الأولية واستخدام الذاكرة. توفر المكتبة تكويناً لمحفزات الرؤية، مما يسمح باستخدام إزاحات مخصصة وحاويات تمرير محددة لتحديد متى يتم تحميل المكون. تتضمن آليات لإدارة دورات حياة المكونات، مما يتيح اختيار ما إذا كان المكون يظل محملاً بعد ظهوره أو يتم إلغاء تحميله عند مغادرة إطار العرض. تغطي القدرات الإضافية العرض المؤجل من خلال استخدام العناصر النائبة وتحسين معالجة الأحداث لمستمعي التمرير وتغيير الحجم. يدعم النظام أيضاً التحقق اليدوي من الرؤية لفرض فحوصات إطار العرض أو إلزام المكون بالعرض.

react-lazyload هو مكون React ومغلف لرؤية إطار العرض مصمم لتقليل استهلاك الموارد عن طريق تأجيل عرض عناصر واجهة المستخدم خارج الشاشة. يعمل كمحسن لأداء الواجهة الأمامية يؤخر عرض الصور أو المكونات حتى تدخل في إطار عرض المتصفح. تمنع المكتبة تحولات التخطيط من خلال السماح بتعريف أبعاد العناصر النائبة، مما يحافظ على استقرار الصفحة أثناء تحميل المحتوى بكسل. تدير الانتقال من هذه العناصر النائبة إلى المحتوى الفعلي باستخدام الحالة الداخلية والرسوم المتحركة الاختيارية. يوفر النظام آليات لاكتشاف رؤية إطار العرض، وتجاوزات العرض اليدوية لفرض التحميل الفوري، ومحفزات رؤية يدوية للحالات التي تكون فيها أحداث التمرير أو تغيير الحجم القياسية غير كافية.

react-intersection-observer هو تنفيذ React لواجهة برمجة تطبيقات Intersection Observer مصمم لتتبع متى تدخل عناصر DOM أو تغادر إطار عرض المتصفح. يوفر مغلفًا ومجموعة من الخطافات (hooks) لمراقبة رؤية العناصر وتشغيل ردود الاتصال عندما يصبح المحتوى مرئيًا للمستخدم. تتضمن المكتبة آلية لاكتشاف انسداد DOM لتحديد ما إذا كان العنصر مغطى بمكونات أخرى أو مخفيًا بواسطة مرشحات CSS. كما تتميز بمغلف polyfill يوفر بدائل للرؤية للمتصفحات التي لا تدعم إمكانيات مراقب التقاطع أصليًا. يغطي المشروع إمكانيات تتبع الرؤية المختلفة، بما في ذلك التحديثات المتزامنة للحالة لإعادة عرض المكونات والمراقبة غير العارضة لتنفيذ ردود الاتصال دون تحديث الحالة. تدعم هذه الأدوات تنفيذ التمرير اللانهائي، والتحميل الكسول للأصول، والرسوم المتحركة القائمة على التمرير.

layzr.js is a JavaScript image lazy loading library designed to improve initial page load speed by delaying the download of images until they enter the browser viewport. It functions as a responsive image selector that identifies the most appropriate image source based on browser support and device pixel ratio. The library employs a system for responsive image delivery that evaluates data attributes to select optimal sources. It includes a mechanism for dynamic content tracking, which monitors the document for newly added images to ensure they are automatically added to the loading queue. Th

Splide is a framework-agnostic TypeScript library for creating accessible, touch-enabled content carousels and image galleries. It provides a dependency-free implementation of sliders that support drag, swipe, and flick interactions across mobile and desktop browsers. The library distinguishes itself through a comprehensive accessibility layer using ARIA roles and screen reader support. It features a responsive breakpoint system that adapts slide dimensions and behavior based on screen width, alongside a plugin system for extending core functionality with custom components and transition effe

Precedent هو تطبيق Next.js ومكتبة مكونات توفر مجموعة أساسية من الأدوات والمبادئ المهيأة مسبقاً لبناء واجهات ويب جاهزة للإنتاج. يعمل كمجموعة أدوات لبدء التطبيقات مع مصادقة مدمجة، وتحليلات، ومجموعة من مكونات واجهة المستخدم (UI) المحددة. يتميز المشروع بمجموعة أدوات Tailwind CSS التي تجمع بين مبادئ إمكانية الوصول ومكتبات الحركة لإنشاء واجهات مصقولة. ويتضمن مولد صور من جانب الخادم لإنشاء صور مشاركة اجتماعية ديناميكية ومرئيات معاينة عند حافة الشبكة (edge) برمجياً. تغطي المكتبة مجموعة واسعة من الإمكانات، بما في ذلك تكامل هوية الطرف الثالث لمصادقة المستخدم وإدارة الجلسات، وتحليلات المواقع التي تركز على الخصوصية لتتبع مقاييس الزوار، ومجموعة من خطافات (hooks) React المخصصة لإدارة حالة جانب العميل، والتخزين المحلي، ورؤية العناصر. كما يوفر أدوات لتنسيق النصوص والأرقام.

Autotrack is a JavaScript library for Google Analytics that automatically captures user interactions and page engagement. It provides a system for declarative analytics implementation, allowing web events to be tracked via HTML attributes to avoid writing custom JavaScript for every interaction. The project includes an analytics bundle generator to create minimized JavaScript files containing only the specific tracking plugins required for a project. It also functions as a single page application tracker that monitors changes to the browser history to record virtual pageviews. The library co

react-waypoint is a React component and viewport tracking tool that executes functions based on the visibility of a DOM node within a scrollable area. It monitors when elements enter or leave the browser viewport or a specified scroll container to trigger callbacks. The project enables the implementation of infinite scrolling, asset lazy loading, and scroll-triggered animations. It allows for custom scroll container definitions and viewport boundary configurations using offsets to determine exactly when events fire. The tool provides element position tracking and visibility monitoring for bo

Fluid Player is a web-based media playback library designed to embed lightweight, responsive video players into websites. It supports standard video formats and adaptive streaming across modern browsers, providing a foundation for consistent media delivery and custom interface branding. The library distinguishes itself through integrated support for industry-standard advertising protocols, allowing for the injection and orchestration of linear and non-linear video advertisements. It includes built-in tracking for viewer engagement and performance metrics, ensuring that ad delivery is synchron