markdalgleish/stellar.js
Stellar.js
Stellar.js is a JavaScript parallax library and scroll-based motion framework used to coordinate DOM element positioning and CSS transforms. It functions as a positioning tool that calculates real-time coordinate shifts for background images and foreground items based on scroll triggers.
The library utilizes a CSS transform animation engine to ensure movement is hardware-accelerated on both mobile and desktop browsers. It creates depth effects by applying different movement speeds to elements relative to the natural scroll rate.
The framework covers a range of motion capabilities, including speed-ratio calculations for background and element parallax, as well as offset-based alignment. It allows for the definition of ancestor elements as reference points to determine when items should return to their original positions.
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.
