10 أدوات الرسوم المتحركة CSS3 يجب عليك المرجعية

نظرًا لأن الناس يميلون إلى إدراك الأشياء التي تتحرك بسهولة أكبر ، يمكن للرسوم المتحركة المستخدمة بذكاء أن تعزز تجربة المستخدم لموقع ما لفت الانتباه إلى العناصر المهمة التي يحتاج المستخدمون إلى ملاحظتها بسرعة.

قدمت CSS3 بناء جملة جديد للرسوم المتحركة يمكنه مساعدتك في تحقيق العديد من الأشياء المثيرة للاهتمام في تصميماتك. قد يكون إنشاء رسوم متحركة باردة في بعض الأحيان معقدًا ويستغرق وقتًا طويلاً ، وذلك عندما يمكن استخدام مكتبات ومولدات animaiton بشكل ممتاز.

تحقق من بعض الرسوم المتحركة التي أصبحت ممكنة مع CSS:

• 38 Inspiring CSS3 Animation Demos
• 15 تأثيرات نصية جميلة تم إنشاؤها باستخدام CSS
• 30 Cool CSS Animations يجب أن تراها
• كيفية إنشاء تأثير ترتد مع CSS3 الرسوم المتحركة

في هذا المنشور ، سوف نلقي نظرة على 10 أدوات رائعة يمكن أن تجعل إنشاء الرسوم المتحركة الخاصة بك أسهل وأسرع.

1. CSS3Gen CSS3 الرسوم المتحركة مولد

CSS3Gen يوفر لك مولد رسوم متحركة سهل الاستخدام يتيح لك إنشاء رسوم متحركة أساسية بسرعة. على الرغم من أنك لن تصنع أعمالًا فنية معقدة باستخدام هذه الأداة ، إلا أنها خيار رائع إذا كنت تريد إنشاء رسم متحرك قياسي دون الكثير من الضجة.

أنت لا يجب أن تجعل يديك متسخة مع الكود, كما يمكنك تعيين الخصائص في نموذج ما ، قم بمعاينة النتيجة ، ثم انسخ الشفرة والصقها في ملف CSS الخاص بك.

2. المغلق تحريك

اذا أنت تحتاج الرسوم المتحركة أكثر تعقيدا, قد تجد المغلق تحريك مفيد. يحتوي على واجهة مستخدم أكثر نضجًا ، ويمكنك تعيين خصائص أكثر قليلاً ، ويمكنك متابعة وإيقاف وإعادة تشغيل الرسوم المتحركة بمساعدة جدول زمني سهل الاستخدام.

هناك أيضا مثال الرسوم المتحركة ، مثل “وثب، ارتداد”, “هزة”, و “تأرجح”, التي يمكنك تحميلها في المولد ، وتعديل الرمز وفقا لاحتياجاتك.

3. Coveloping CSS الرسوم المتحركة مولد

Covelopingمولد الرسوم المتحركة هو على الأرجح الخيار الأفضل إذا كنت جديدا مع الرسوم المتحركة CSS3, وتريد أن تفهم بسرعة كيف تعمل. تتيح لك هذه الأداة البسيطة والقوية اختبار الأنواع المختلفة من الرسوم المتحركة التي تقدمها CSS3 ، والتعرف بسهولة على الفرق بينها.

يجب عليك فقط تعيين 4 معلمات: نوع الحركة ، وظيفة الحركة ، المدة بالثواني ، وإذا كانت الرسوم المتحركة غير محدودة. عندما تكون جاهزًا ، عليك فقط الحصول على رمز HTML و CSS الذي تم إنشاؤه والاستيلاء عليهما.

4. سحر الرسوم المتحركة

سحر الرسوم المتحركة هي مكتبة CSS الرائعة التي تجعل من الممكن بسهولة وضع الرسوم المتحركة مع المؤثرات الخاصة على موقعك. على سبيل المثال ، يمكنك جعل العناصر تتلاشى من الداخل والخارج ، مفتوحة لليسار أو لليمين ، ثم تعود أو تدور للأسفل أو للأعلى أو لليسار أو لليمين ، وغيرها الكثير

كل ما عليك فعله هو تنزيل الكود ، تضمين ملف CSS في صفحة HTML الخاصة بك ، وإضافة الفئة المناسبة بمساعدة jQuery بالطريقة التالية:

 $ ('. yourdiv'). hover (function () $ (this) .addClass ('magictime puffIn')؛)؛

يمكنك أيضًا تغيير إعدادات المؤقت ، وجعل الرسوم المتحركة غير محدودة بمساعدة jQuery (لمزيد من التفاصيل ، انظر ملف الملف التمهيدي).

5. تحريك

Animate.css يوفر لك مجموعة من بارد ، الرسوم المتحركة CSS3 عبر المتصفح. تنقسم الرسوم المتحركة إلى مجموعات مثل Attention Seekers ، ومداخل Bouncing ، و Bouncing Exit ، و Fading Entents ، وغيرها الكثير ، لذلك لا يمكنك الشكوى من عدم وجود خيار.

يمكنك تنزيل الكود من Github ، ثم عليك فقط إضافة ملف CSS إلى صفحة HTML ، وفئات CSS ذات الصلة إلى عناصر HTML التي تريد تحريكها.

6. Bounce.js

Bounce.js هي مكتبة JavaScript مفيدة تمكنك من إنشاء الرسوم المتحركة المعقدة. يحتوي Bounce.js على واجهة مستخدم ناضجة تتيح لك إما إضافة مكونات مختلفة - مثل التخفيف والمدة والتأخير وعدد مرات الارتداد - يدويًا إلى الرسوم المتحركة الخاصة بك ، أو تحديد إعداد مسبق الإعداد جاهز ، ثم تشغيل الرسوم المتحركة ، وضبط الخصائص إذا لزم الأمر.

7. AniJS

AniJS هي مكتبة جافا سكريبت فائق التبريد تسمح لك بإضافة الرسوم المتحركة CSS3 إلى التصميمات الخاصة بك ، وإلى بناء مكونات واجهة المستخدم المتطورة مثل علامات التبويب المتحركة ، الأكورديون ، الوسائط ، القوائم المنزلقة ، إشعارات تطبيقات الجوال ، الكشف عن التمرير ، وغيرها الكثير.

إنه يعمل مع جميع المتصفحات الحديثة بما في ذلك iOS و Android ، ولا يحتاج إلى أي مكتبات تابعة لجهات أخرى ، ويحتوي على واجهة عرض مذهلة تسمى AniCollection حيث يمكنك بسهولة تجربة التأثيرات المختلفة التي توفرها المكتبة.

8. المغازل عنصر واحد CSS

هل تريد تحسين تصاميمك من قبل؟ تحميل المغازل المتحركة? إذا كانت الإجابة بنعم ، فقد تكون مكتبة CSS اللطيفة هذه اختيارًا ممتازًا لك. كود CSS للمغازل هو مكتوب بأقل. لا توجد أي إعدادات ، الرمز جاهز ، يجب عليك فقط إدراجه في ملفات HTML و CSS الخاصة بك.

9. عداد المسافات

عداد المسافات هي أداة رائعة ل ضع عدادات متحركة باردة على موقعك. إنها مكتبة CSS و JavaScript ، وجزء CSS مكتوب بلغة Sass ، ويمكنك الاختيار من بين مظاهر مختلفة مثل “رقمي”, “محطة القطار”, و “سيارة”.

لاستخدام عداد المسافات ، يجب عليك إضافة ملف JavaScript وملف السمة المختار إلى صفحة HTML ، ثم الطبقة = "عداد المسافات" محدد العنصر الذي تريد تحويله إلى عداد متحرك. الخيار المثالي لتمثيل البيانات بصريا ، أو “قريبا” صفحة أكثر لافتة للنظر.

10. Snabbt.js

Snabbt.js هي مكتبة الرسوم المتحركة أضيق الحدود التي يساعدك على تحريك الأشياء بسهولة. إذا كنت بحاجة إلى القليل من الإلهام ، ألق نظرة على العروض التوضيحية لمعرفة ما يمكنك تحقيقه باستخدام أداة الرسوم المتحركة الذكية ، فإن الجدول الدوري المتحرك في الصورة أدناه هو مجرد واحدة من العديد من الاحتمالات التي تجعل Snabbt.js تنفيذها.

تحتاج إلى كتابة جافا سكريبت قليلاً إذا كنت تريد استخدام هذه المكتبة ، ولكن كنتيجة مذهلة للغاية ، لذلك ربما تستحق المشكلة.