مكتبة رسوم متحركة بسيطة بصياغة جديدة لإضافة تأثيرات الحركة إلى UI، مع التركيز على الأداء وإمكانية الوصول.
- نجوم GitHub
- 1.6K
- تاريخ التحديث
- Dec 6, 2024
- الترخيص
- MIT License
Sal
تتيح هذه المكتبة للمطورين إضافة تأثيرات تمرير سلسة إلى تطبيقات الويب، تبدأ عند ظهور العناصر في إطار العرض.
Sal مكتبة خفيفة لتحريك العناصر أثناء التمرير، تركز على الأداء وتسهّل إضافة رسوم متحركة ديناميكية إلى عناصر الويب عند دخولها إلى نطاق العرض. وبحجم حزمة يقل عن 2.8 kb، تعمل دون أي تبعيات، ما يضمن تجربة استخدام سلسة.
تعتمد Sal على API Intersection Observer، فتكتشف بكفاءة ظهور العناصر على الشاشة وتُشغّل الرسوم المتحركة تبعًا لذلك. وتوفر هذه API أداءً مثاليًا، إذ تقلل بدرجة كبيرة الأعباء المرتبطة بمراقبة أحداث التمرير.
التكامل بسيط: بإضافة سمة `data-sal` إلى عناصر HTML، يستطيع المطورون تحديد تأثير الحركة المطلوب. ويمكن تخصيص خيارات مثل المدة والتأخير والتدرج باستخدام سمات بيانات إضافية أو متغيرات CSS، ما يمنح تحكمًا كاملًا في سلوك الحركة. وتشمل الحركات المدعومة تأثيرات التلاشي والانزلاق والتكبير والقلب وغيرها.
توفر Sal أيضًا ميزات متقدمة تتيح تعديل الخيارات بعد التهيئة، بما يدعم الاستجابة والتكيف وفق تفاعل المستخدم. كما تدعم مستمعات الأحداث للتعامل مع دخول العناصر إلى نطاق العرض أو خروجها منه، ما يجعلها مناسبة للتطبيقات التفاعلية التي تتطلب استجابة آنية لنشاط المستخدم أثناء التمرير.
الميزات
- خفيفة (أقل من 2.8 kb)
- دون تبعيات
- رسوم متحركة عند ظهور العناصر أثناء التمرير
- تعتمد على Intersection Observer API
- تكامل بسيط مع HTML
- تدعم تأثيرات رسوم متحركة متعددة
- خيارات قابلة للتخصيص للمدة والتأخير والتسارع
- أحداث عند دخول إطار العرض والخروج منه
- تدعم متغيرات CSS للخصائص المخصصة
- إمكانية إعادة ضبط الخيارات وتحديثها بعد التهيئة
عناصر ذات صلة
تُبسّط مكتبة الرسوم المتحركة هذه إنشاء رسوم متحركة جذابة لتطبيقات الويب، إذ تجمع بين المرونة وسهولة الاستخدام.
- نجوم GitHub
- 50.5K
- تاريخ التحديث
- Dec 6, 2024
- الترخيص
- MIT License
تتيح لك أداة الرسوم المتحركة هذه إنشاء رسوم متحركة وتفاعلات جذابة على الويب بسهولة، لتحسين تجربة المستخدم بما يتجاوز الانتقالات المعتادة.
- نجوم GitHub
- 20.0K
- تاريخ التحديث
- Dec 6, 2024
مكتبة حديثة لتحريك عناصر الويب، مبنية على واجهات API الأصلية للمتصفح لضمان أداء سريع وحجم ملفات صغير.
- نجوم GitHub
- 26.1K
- تاريخ التحديث
- Dec 6, 2024
- الترخيص
- MIT License
يقدم حل الرسوم المتحركة هذا انتقالات سلسة وعالية الأداء تضفي الحيوية على أي واجهة، وتعزز تجربة المستخدم بسلاسة.
- نجوم GitHub
- 28.3K
- تاريخ التحديث
- Dec 6, 2024
- الترخيص
- MIT License
عزّز تطبيقات الويب لديك برسوم متحركة جذابة بكل سهولة.
- نجوم GitHub
- 12.9K
- تاريخ التحديث
- Dec 6, 2024
- الترخيص
- MIT License
أداة قوية لإنشاء رسوم متحركة مبهرة بسهولة في تطبيقات React.
- نجوم GitHub
- 26.1K
- تاريخ التحديث
- Dec 6, 2024
- الترخيص
- MIT License
أُطر عمل للرسوم المتحركة قائمة على الأدوات، مبنية على GSAP لإنشاء الرسوم المتحركة بشيفرة قليلة.
- نجوم GitHub
- 414
- تاريخ التحديث
- Dec 2, 2024
- الترخيص
- Other