() translation by (you can also view the original English article)
يمكن أن تعزز الرسوم المتحركة الهادئة والمصممة جيداً من تجربة المستخدم في مواقع الويب والتطبيقات. يمكن أن تحكي قصة، المساعدة في الملاحة، وأكثر من ذلك بكثير.
إذا كنت تريد معرفة كيفية استخدام الرسوم المتحركة في تصميم الويب الخاص بك ومشاريع التطوير ، فابحث عن المزيد. لقد وضعنا قائمة شاملة من 11 دورة تدريبية ستعلمك كيفية إنشاء رسوم متحركة جميلة باستخدام CSS و JavaScript وإطارات عمل مخصصة مثل GreenSock و Sequence.js.
1. الرسوم المتحركة العملية على شبكة الإنترنت
تعد هذه الدورة التدريبية الأولى نقطة بداية رائعة للتعرف على الرسوم المتحركة. في 30 مقطع فيديو تدوم أكثر من أربع ساعات، ستتعرف على الكثير من الطرق العملية لإنشاء رسوم متحركة للأزرار، والجداول التسعير، وعناصر الويب المفيدة الأخرى، باستخدام CSS مختصر و jQuery.
2. 6 مشاريع مفيدة لرسوم CSS3 المتحركة
في بعض الأحيان، تكون أفضل طريقة لتعلم مهارة جديدة هي رفع الأكمام وإكمال مشاريع الحياة الحقيقية. في هذه الدورة القصيرة، ستقوم ببناء ستة مشاريع صغيرة ولكنها مفيدة تستخدم رسوم CSS المتحركة.
3. دليل مرئي إلى لرسوم CSS المتحركة
على الرغم من أن JavaScript و jQuery مفيدة لبناء الرسوم المتحركة، فمن الممكن أيضاً إنشاء تأثيرات متحركة رائعة باستخدام CSS بنقاء. في هذه الدورة، ستتعلم كيفية إنشاء رسوم CSS المتحركة مدعومة بخصائص النقل والتحويل. وباستخدام أداة تصميم الويب المرئي الشائعة لـ Webflow (عبر حساب مجاني)، ستتمكن من مشاهدة الرسوم المتحركة الخاصة بك في الوقت الفعلي، عند قيامك بإنشائها.
4. مقدمة إلى Anime.js
Anime.js هو محرك رسومات JavaScript صغير ولكنه قوي. في هذه الدورة، ستتعلم أساسيات هذه المكتبة، وستقوم أيضاً بإنشاء واجهة مستخدم بسيطة لسباق الفورمولا 1 باستخدامها.
5. التيسير إلى وظائف Cubic Bezier
ما هو التيسير؟ لماذا هو مفيد في عالم الرسوم المتحركة على شبكة الإنترنت؟ كيف يمكنك التحكم فيه وتطبيقه في سياق CSS؟ في هذه الدورة الفائقة السرعة، ستتعلم إجابات كل هذه الأسئلة.
6. الرسوم المتحركة ثلاثية الأبعاد مع Three.js
يعد إطار عمل Three.js طريقة رائعة لإنشاء رسومات ثلاثية الأبعاد في المستعرض. في هذه الدورة، ستتعلم إنشاء بعض الرسوم المتحركة ثلاثية الأبعاد المعقدة باستخدام إطار عمل هذا لJavaScript. تأكد أيضاً من الاطلاع على الدورات التدريبية السابقة، 3D على الويب باستخدام Three.js و Three.js: Beyond the Basics. هذه الدورات الثلاث ستمنحك مقدمة شاملة عن Three.js من الألف إلى الياء.
7. منصة GreenSock للرسوم المتحركة: الخطوات الأولى
GreenSock هو عبارة عن إطار JavaScript مما يجعل من السهل تحريك عناصر HTML. خلال هذه الدورة، سوف تتخذ خطواتك الأولى في تعلم كيفية استخدام هذا الإطار القوي. طالما أنك تفهم HTML و CSS، إلى جانب المعرفة الأساسية JavaScript، ستكون مجهزاً بكل ما تحتاج للمتابعة.
8. 3 مشاريع GreenSock: الرسوم المتحركة العملية مع GSAP
يعتمد هذا المساق على الدورة التدريبية السابقة ويأخذك من خلال ثلاثة مشاريع ستتعلم فيها كيفية إنشاء رسوم متحركة برمجية، في سيناريوهات واقعية، باستخدام منصة GreenSock Animation. ستتعرف على كيفية إنشاء أداة تحميل مسبق متحركة وشعار SVG للرسوم المتحركة ومنزلق محتوى مخصص.
9. العمل مع الرسوم CSS keyframe المتحركة
كيف تريد أن تتعلم كيفية إنشاء الرسوم المتحركة باستخدام خصائص CSS keyframe و animation، في عشر دقائق فقط؟ ستتيح لك دورة استراحة المقهى السريعة هذه من القيام بذلك.
10. تعزيز الرسوم المتحركة مع jQuery UI
jQuery UI هو امتداد لـ jQuery يجعل من السهل إنشاء عناصر واجهة مستخدم نظيفة لمواقع الويب الخاصة بك. كما يوفر أيضاً وظائف تعمل على توسعة قدرة jQuery على تحريك المحتوى. في هذه الدورة التدريبية القصيرة، ستتعرف على كيفية استخدامها لتحسين صورك في jQuery.
11. مقدمة في Sequence.js
Sequence.js هو إطار رسوم CSS متحركة يمكنك استخدامه لإنشاء أشرطة التمرير والعروض التقديمية والتطبيقات الأخرى القائمة على الخطوة. لديه كل الوظائف الضرورية المدمجة؛ كل ما عليك القيام به هو إضافة المحتوى الخاص بك والتصميم. سوف تعلمك هذه الدورة القصيرة أساسيات استخدام Sequence.js ووضع الأساس لمزيد من استكشاف جميع الخيارات والميزات.
شاهد أي دورة الآن
يمكنك أن تأخذ أي من دوراتنا على الفور مع الاشتراك في Envato Elements. مقابل رسوم شهرية واحدة منخفضة، يمكنك الوصول ليس فقط إلى هذه الدورات ، ولكن أيضاً إلى مكتبتنا المتنامية التي تضم أكثر من 1,000 دورة فيديو وكتيبات إلكترونية رائدة في المجال على + Envato Tuts.
بالإضافة إلى ذلك، يمكنك الآن الحصول على تنزيلات غير محدودة من مكتبة Envato Elements الضخمة التي تضم أكتر من 700,000 من الممتلكات الإبداعية. قم بإنشاء خطوط ورسومات وصور ورسومات فريدة، وتقديم مشاريع أفضل بشكل أسرع.
