markdalgleish/stellar.js
Stellar.js
Stellar.js es una biblioteca de paralaje de JavaScript y un framework de movimiento basado en desplazamiento (scroll) utilizado para coordinar el posicionamiento de elementos del DOM y transformaciones CSS. Funciona como una herramienta de posicionamiento que calcula cambios de coordenadas en tiempo real para imágenes de fondo y elementos en primer plano basados en disparadores de desplazamiento.
La biblioteca utiliza un motor de animación de transformación CSS para garantizar que el movimiento esté acelerado por hardware tanto en navegadores móviles como de escritorio. Crea efectos de profundidad aplicando diferentes velocidades de movimiento a los elementos en relación con la tasa de desplazamiento natural.
El framework cubre una gama de capacidades de movimiento, incluyendo cálculos de relación de velocidad para el paralaje de fondo y elementos, así como alineación basada en compensación. Permite la definición de elementos ancestros como puntos de referencia para determinar cuándo los elementos deben volver a sus posiciones originales.
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.
