markdalgleish/stellar.js
Stellar.js
Stellar.js هو مكتبة JavaScript للبارالاكس وإطار عمل للحركة القائم على التمرير يُستخدم لتنسيق وضع عناصر DOM وتحويلات CSS. يعمل كأداة تحديد موضع تحسب تحولات الإحداثيات في الوقت الفعلي لصور الخلفية والعناصر الأمامية بناءً على مشغلات التمرير.
تستخدم المكتبة محرك رسوم متحركة لتحويل CSS لضمان تسريع الحركة بواسطة الأجهزة على كل من متصفحات الجوال وسطح المكتب. تخلق تأثيرات عمق من خلال تطبيق سرعات حركة مختلفة على العناصر بالنسبة لمعدل التمرير الطبيعي.
يغطي إطار العمل مجموعة من قدرات الحركة، بما في ذلك حسابات نسبة السرعة لبارالاكس الخلفية والعناصر، بالإضافة إلى المحاذاة القائمة على الإزاحة. يسمح بتعريف العناصر السلفية كنقاط مرجعية لتحديد متى يجب أن تعود العناصر إلى مواقعها الأصلية.
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.
