hakimel/stroll.js
Stroll.js
stroll.js هي مكتبة رسوم متحركة لواجهة المستخدم الأمامية مصممة لتحويل قوائم الويب القياسية إلى شاشات تمرير ثلاثية الأبعاد. تعمل كأداة لإنشاء منظورات قائمة على العمق باستخدام تحويلات CSS3.
تتخصص المكتبة في رسوم متحركة الويب ثلاثية الأبعاد وتصميم القوائم التفاعلية. تنفذ تأثيرات مرئية تستجيب لحركة المستخدم، مما يضيف عمقاً مكانياً ومنظوراً لعناصر القائمة أثناء التنقل فيها.
Features
- 3D Depth Effects - Transforms standard lists into 3D scrolling displays using rotations and zoom to create spatial depth.
- 3D Perspective Transforms - Implements three-dimensional depth and tilting effects on list elements using CSS transforms.
- 3D Transform Animations - Animates 3D CSS transforms like rotateX and translateZ to create depth-based motion effects for lists.
- Dynamic Scrolling Lists - Builds dynamic scrolling lists that react to user movement to provide an engaging visual experience.
- Scroll-Offset Tracking - Tracks scroll distance to translate the positions of list items and trigger depth-based visual transitions.
- 3D Scroll Libraries - Implements a JavaScript library that creates three-dimensional scrolling perspectives for lists using CSS3 transforms.
- Animation Libraries - Provides a lightweight utility for adding motion and spatial effects to web-based list elements.
- Proximity-Based Scaling - Adjusts the scale and opacity of list items based on their proximity to the center of the view.
- CSS3 Hardware-Accelerated Animations - Leverages GPU-accelerated CSS3 properties to create immersive and modern visual transforms for web content.
- Staggered Animation Offsets - Calculates unique animation offsets based on an item's position in the list to create staggered visual effects.
- Style Object Injection - Directly modifies the element style object in real time to trigger visual state changes based on scroll position.
- Scroll Effects - CSS-based list scroll effects.
- 动画(Animate) - Listed in the “动画(Animate)” section of the Awesome Frontend awesome list.
