markdalgleish/stellar.js
Stellar.js
Stellar.js ist eine JavaScript-Parallax-Bibliothek und ein scrollbasiertes Bewegungsframework, das zur Koordination der DOM-Elementpositionierung und CSS-Transformationen verwendet wird. Es fungiert als Positionierungstool, das Echtzeit-Koordinatenverschiebungen für Hintergrundbilder und Vordergrundelemente basierend auf Scroll-Triggern berechnet.
Die Bibliothek nutzt eine CSS-Transformations-Animations-Engine, um sicherzustellen, dass Bewegungen auf mobilen und Desktop-Browsern hardwarebeschleunigt sind. Sie erzeugt Tiefeneffekte, indem sie unterschiedliche Bewegungsgeschwindigkeiten auf Elemente relativ zur natürlichen Scroll-Rate anwendet.
Das Framework deckt eine Reihe von Bewegungsfunktionen ab, einschließlich Geschwindigkeitsverhältnis-Berechnungen für Hintergrund- und Element-Parallax sowie offsetbasierter Ausrichtung. Es erlaubt die Definition von Vorfahrenelementen als Referenzpunkte, um zu bestimmen, wann Elemente zu ihren ursprünglichen Positionen zurückkehren sollen.
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.
