شرير المغلق - ساخنة جديدة مكتبة الرسوم المتحركة في CSS3 النقي
بفضل CSS3 ، يمكنك إنشاء بعض الرسوم المتحركة المجنونة على الويب. هذه يمكن العمل عبر جميع المتصفحات وعناصر الصفحة للتحكم في عناصر التنقل ، المنسدلة ، علامات التبويب ، سمها ما شئت.
في الواقع ، يمكنك إنشاء هذه الرموز ديناميكيًا باستخدام أدوات الرسوم المتحركة. ولكن هذه محدودة للغاية بالمقارنة مع مكتبة للرسوم المتحركة كاملة.
Wicked CSS هي أحدث مكتبة من نوعها. هذا يذكرني في وقت مبكر Animate.css التي كانت بسيطة إلى حد ما وبدائية, بعد يمكن استخدامها في أي موقع إلى حد كبير.
يمكنك إلقاء نظرة خاطفة على الصفحة الرئيسية لعرض مباشر مع قائمة بجميع الرسوم المتحركة المدعومة. اعتبارا من كتابة هذا المقال أحسب 24 مجموع أنماط الرسوم المتحركة من الشرائح إلى التدوير ونبض / كذاب الآثار.
العديد من هذه الرسوم المتحركة هي ميزات لمرة واحدة تُستخدم لإظهار عنصر ما (أو خارجه). هذا مفيد للصفحات التي تحتوي على رسوم متحركة للتمرير لعرض العناصر المحددة للصفحة.
ولكن يمكنك أيضا استخدم هذا لإظهار (أو إخفاء) عناصر صفحة إضافية مثل القوائم المنسدلة أو أشرطة البحث أو نماذج الاشتراك المخفية أو أي شيء آخر. إليك قائمة صغيرة من الرسوم المتحركة التي يمكنك الاختيار من بينها:
- هزة
- التكبير / التصغير
- حرك لأعلى / لأسفل
- تتلاشى في الخروج
- المتداول في / خارج
- ترتد والبوب
- دوران دائري في / خارج
تم تصميم كل أنماط الرسوم المتحركة هذه للاستخدام مرة واحدة. يمكن أن يطلق عليهم عدة مرات لكل صفحة ولكل عنصر ، ولكن هذه ليست تكرار الرسوم المتحركة.
بدلاً من ذلك ، ستستخدم هذه الأدوات بناءً على تأثير النقر أو التمرير أو التمرير السريع للمستخدم. يمكن استخدامها أيضًا على أزرار CTA لتأثيرات النبض / الخفقان ، لكن هذا يتطلب وظيفة توقيت JavaScript.
ألق نظرة على صفحة الأمثلة للحصول على معاينة مباشرة وبعض التفاصيل الأخرى. ستجد أيضًا وثائق كاملة على الموقع الرئيسي جنبًا إلى جنب مع GitHub repo.
Wicked CSS هي مكتبة أحدث لذا لا يوجد لديها متابعين ضخمين حتى الآن. لكن المكتبة مستقرة ومن المحتمل أن تكون موجودة لسنوات قادمة.
