markdalgleish/stellar.js
Stellar.js
Stellar.js este o bibliotecă JavaScript de parallax și un framework de mișcare bazat pe scroll, utilizat pentru a coordona poziționarea elementelor DOM și transformările CSS. Funcționează ca un instrument de poziționare care calculează schimbările de coordonate în timp real pentru imaginile de fundal și elementele din prim-plan pe baza declanșatorilor de scroll.
Biblioteca utilizează un motor de animație cu transformări CSS pentru a asigura că mișcarea este accelerată hardware atât pe browserele mobile, cât și pe cele desktop. Creează efecte de profunzime prin aplicarea unor viteze de mișcare diferite elementelor în raport cu rata naturală de scroll.
Framework-ul acoperă o gamă de capabilități de mișcare, inclusiv calcule ale raportului de viteză pentru parallax-ul fundalului și al elementelor, precum și alinierea bazată pe offset. Permite definirea elementelor ancestrale ca puncte de referință pentru a determina când elementele ar trebui să revină la pozițiile lor originale.
Features
- Parallax Effects - Creates depth and motion in web layouts by moving background and foreground elements at different scroll speeds.
- Hardware-Accelerated Animations - Ensuring smooth movement of visual elements on mobile devices by using hardware-accelerated transforms.
- Motion Speed Control - Generates parallax effects by adjusting the movement speed of elements relative to the natural scroll rate.
- Scroll-Driven Motion Libraries - Functions as a toolkit for coordinating element alignment and repositioning based on scroll triggers.
- CSS Transform Animations - Utilizes a CSS transform engine to ensure smooth, hardware-accelerated movement of parallax elements.
- Hardware Acceleration Optimization - Optimizes performance by offloading CSS transform animations to the GPU for smooth movement on mobile devices.
- Dynamic Animation Controllers - Provides tools for updating animation parameters and element positions in real time based on scroll progress.
- Depth Simulation Ratios - Calculates element offsets using a speed ratio multiplied by the current scroll position to simulate depth.
- Element Positioning - Calculates and applies real-time coordinate shifts to position DOM elements during scrolling.
- Parallax Layering Offsets - Allows the definition of ancestor elements as reference points for calculating parallax layering and offsets.
- Custom Animation Logic - Provides a plugin system to define custom CSS properties and functions for element repositioning.
- Boundary-Based Alignment - Controls when elements return to original positions based on when a parent element reaches the screen edge.
- Coordinate Resets - Returns elements to their original coordinates when a designated ancestor element reaches a specific screen edge.
- Parallax Backgrounds - Repositions background images during scrolling by applying specific speed ratios to create depth.
- Scroll Logic Extensions - Offers a system to define custom CSS properties and functions for tracking and repositioning elements.
- Scroll Effects - Library for simplified parallax scrolling.
- Web Components and UI - Library for implementing asynchronous scrolling effects.
- Scrolling Effects - Simplifies parallax scrolling.
