terwanerik/ScrollTrigger
ScrollTrigger
ScrollTrigger هي مكتبة JavaScript ومدير لأحداث التمرير في DOM مصممة لتنفيذ استدعاءات (callbacks) وتبديل فئات CSS عندما تدخل العناصر إلى إطار عرض المتصفح أو تخرج منه. تعمل كواجهة عالية المستوى لـ Intersection Observer API ونظام لبدء التحولات المرئية والمهام غير المتزامنة بناءً على موقع العنصر بالنسبة لإطار العرض.
تسمح الأداة بتحديد نقاط تشغيل دقيقة باستخدام إزاحات البكسل أو النسبة المئوية للتحكم بدقة في وقت إطلاق الأحداث. وتدير الرسوم المتحركة المرئية القائمة على التمرير وعمليات التحميل الكسول (lazy loading) من خلال تتبع عتبات الرؤية.
توفر المكتبة قدرات لمراقبة نشاط التمرير، مثل تتبع وقت بدء التمرير أو توقفه أو تغيير اتجاهه. كما تدعم تشغيل أحداث إطار العرض لتشغيل وظائف مخصصة أو وعود (promises) عند عبور العناصر لإحداثيات محددة.
Features
- Scroll Animations - Provides a system to trigger visual transitions and asynchronous tasks based on element visibility within the viewport.
- Intersection Observer Wrappers - Functions as a high-level wrapper for the Intersection Observer API to simplify element visibility detection.
- Viewport Intersection Callbacks - Runs custom functions or promises when elements enter, leave, or remain visible within the browser viewport.
- Scroll-Driven Animation Tools - Synchronizes visual transitions and CSS property changes with the user's scroll position and element visibility.
- Scroll Event Controllers - Provides logic to monitor scroll events and direction changes to control UI element states.
- State-Based CSS Toggling - Dynamically modifies CSS classes on elements to reflect their current visibility state during scrolling.
- Scroll-Triggered Class Mappings - Maps viewport intersection events to specific CSS class changes to drive visual transitions.
- Viewport Intersection Events - Triggers custom JavaScript functions when elements enter or exit the viewport based on visibility thresholds.
- Viewport Threshold Dispatchers - Executes custom callbacks precisely when elements cross predefined pixel or percentage offsets within the viewable area.
- Scroll Trigger Libraries - Provides a complete JavaScript toolset for executing callbacks and toggling CSS classes during viewport intersection.
- Viewport Visibility Callbacks - Executes custom functions when elements enter or leave the visible area to trigger tasks like lazy loading.
- Viewport Relative Tracking - Monitors the real-time position of DOM elements relative to the browser viewport to determine trigger points.
- Scroll Behavior Observers - Tracks user scrolling behavior to trigger actions when scrolling starts, stops, or changes direction.
- Scroll-Offset Thresholds - Manages precise trigger points using pixel or percentage offsets to control event firing.
- Step Trigger Offsets - Allows defining exact trigger moments using pixel or percentage offsets based on element or viewport size.
- Scroll Observers - Provides observers to track scroll start, stop, and direction changes for reactive UI logic.
- Lazy Loading Schedulers - Supports lazy loading by scheduling asynchronous tasks when elements enter the viewport.
