terwanerik/ScrollTrigger
ScrollTrigger
ScrollTrigger ist eine JavaScript-Bibliothek und ein DOM-Scroll-Event-Manager, der dazu dient, Callbacks auszuführen und CSS-Klassen umzuschalten, wenn Elemente in den Browser-Viewport eintreten oder ihn verlassen. Es fungiert als High-Level-Schnittstelle für die Intersection Observer API und als System zum Initiieren visueller Übergänge und asynchroner Aufgaben basierend auf der Position eines Elements relativ zum Viewport.
Das Tool ermöglicht die Definition präziser Triggerpunkte unter Verwendung von Pixel- oder Prozent-Offsets, um genau zu steuern, wann Ereignisse ausgelöst werden. Es verwaltet scrollgesteuerte visuelle Animationen und Lazy-Loading-Implementierungen durch die Verfolgung von Sichtbarkeitsschwellenwerten.
Die Bibliothek bietet Funktionen zur Überwachung von Scroll-Aktivitäten, wie z. B. das Verfolgen, wann das Scrollen beginnt, stoppt oder die Richtung ändert. Sie unterstützt zudem das Auslösen von Viewport-Ereignissen, um benutzerdefinierte Funktionen oder Promises auszuführen, wenn Elemente bestimmte Koordinaten überschreiten.
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.
