Awesome GitHub RepositoriesElement-Targeted Scrolling

This project is a collection of official plugin packages and a native integration library designed to provide a consistent interface for accessing hardware and software functionality across different mobile and desktop platforms. It serves as a native platform bridge, enabling cross-platform applications to invoke native code and manage operating system dependencies. The project utilizes a federated plugin architecture, splitting plugins into common interfaces and separate platform implementations to allow for independent development and extension. It further supports native integration throu

iscroll is a JavaScript smooth scrolling library and web interaction framework. It provides a 2D web panning controller and a CSS transform zoom engine to manage inertial scrolling, panning, and zooming for web elements across different devices. The project enables the implementation of custom scrollbar interfaces and navigation maps that track the current viewport position. It supports the creation of interactive web carousels with element snapping, web parallax effects, and content scaling via pinch-to-zoom or mouse-wheel inputs. The library covers a broad range of interaction capabilities

elevator.js is a lightweight JavaScript library that adds a playful, elevator-themed scroll-to-top button to a webpage. When clicked, it smoothly animates the page back to the top while playing a looping elevator music track in the background, masking the transition and adding a whimsical touch to the user experience. The library goes beyond a simple scroll-to-top button by offering configurable scroll duration, the ability to scroll to any specified DOM element with optional vertical padding, and callback hooks that fire user-defined functions at the start and end of the animation. This allo

Scrollama is a JavaScript library for scroll-driven storytelling that uses the browser's native IntersectionObserver API to trigger step-based callbacks and animations as the user scrolls through a page. It pins graphic elements using CSS sticky positioning while scrolling through associated text steps, enabling side-by-side narrative experiences without JavaScript-driven layout calculations. The library provides a configurable offset threshold system that accepts a single global offset or per-element data-attribute offsets to define the viewport position that triggers step events. It reports

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

Swup هي مكتبة انتقال الصفحة ومحمل صفحات AJAX مصمم لإنشاء انتقالات سلسة ومتحركة بين الصفحات على مواقع الويب التي يتم عرضها من جانب الخادم. تعمل كمنسق لمحتوى DOM ومدير لسجل المتصفح، حيث تعترض التنقل لاستبدال محتوى الصفحة ديناميكياً ومحاكاة تجربة تطبيق الصفحة الواحدة. يتميز المشروع من خلال نظام دورة حياة يعتمد على الخطافات (hooks) وبنية إضافات تسمح بحقن منطق مخصص وتأثيرات رسوم متحركة. يدعم طرقاً مرئية متقدمة بما في ذلك تحويل محتوى DOM، وعرض DOM المتوازي للرسوم المتحركة المتداخلة، والتكامل مع واجهة برمجة تطبيقات انتقالات العرض (View Transitions API) الأصلية للمتصفح. تغطي المكتبة مجموعة واسعة من الإمكانيات، بما في ذلك إدارة التنقل من جانب العميل، والتخزين المؤقت للصفحات القائم على الذاكرة، والتحميل المسبق للصفحات في الخلفية لتحسين الأداء. كما توفر استعادة شاملة لموضع التمرير، وتحسينات إمكانية الوصول لقارئات الشاشة، وأدوات لمزامنة بيانات تعريف رأس المستند وتنفيذ النصوص البرمجية عبر الانتقالات.

Simpl هي مكتبة أمثلة HTML وCSS وJavaScript توفر مجموعة من العروض التوضيحية الوظيفية البسيطة لتقنيات الويب الأساسية وواجهات برمجة تطبيقات المتصفح الأصلية. تعمل كمرجع للتنفيذ ومعرض أنماط لتطوير الواجهة الأمامية، حيث تقدم أمثلة عملية لكيفية تنفيذ ميزات الويب الشائعة. يعرض المشروع مجموعة واسعة من إمكانيات المتصفح، بما في ذلك اتصالات الويب في الوقت الفعلي عبر WebSockets وWebRTC، وتقنيات تصميم الويب المستجيب للتخطيطات التكيفية، وتنفيذ سير العمل دون اتصال باستخدام عمال الخدمة (service workers). كما يوفر عروضاً توضيحية للتخزين من جانب العميل باستخدام IndexedDB ومخازن القيمة الرئيسية القائمة على المتصفح. تغطي المكتبة سطحاً واسعاً من إمكانيات الويب، بما في ذلك تكامل الأجهزة مع مستشعرات الجهاز وتحديد الموقع الجغرافي، والتقاط وتشغيل الوسائط المتقدم للصوت والفيديو، واستخدام canvas لعرض الرسومات ثنائية وثلاثية الأبعاد. تشمل المجالات الإضافية معالجة البيانات، والبرمجة غير المتزامنة، واستخدام واجهات برمجة تطبيقات المتصفح لمراقبة الأداء واتصال الشبكة.

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

react-scroll هي مكتبة لإدارة سلوك التمرير السلس والفوري بين عناصر الصفحة في تطبيقات React. تعمل كمتحكم تمرير DOM، وتوفر واجهة برمجة تطبيقات تعريفية ومجموعة من المكونات لتحريك إطار العرض (viewport) إلى عناصر مستهدفة محددة. تتيح المكتبة التمرير المخصص من خلال السماح لإطار العرض بالانتقال إلى العناصر المستهدفة إما من خلال قفزات فورية أو انتقالات متحركة. وتوفر نظاماً لدمج منطق التمرير هذا في مكونات مخصصة باستخدام mixins لتحديد مشغلات وأهداف حركة محددة. يغطي المشروع التنقل في إطار العرض وانتقالات التركيز داخل تخطيطات تطبيقات الصفحة الواحدة، مما يربط إجراءات المستخدم في مكونات React بمواقع محددة داخل الصفحة.

Hyperscript is a DOM manipulation library and HTML scripting language that functions as a logic engine and reactive UI framework. It allows for the definition of interactive behavior and client-side logic directly within HTML attributes. The system distinguishes itself through declarative web scripting and in-HTML interactive behavior, which removes the requirement for separate JavaScript files to manage element states. It utilizes a specialized syntax for data processing, employing pipe operators to filter, sort, and convert data collections within the browser. The framework provides capabi