إنشاء الحاجيات المتحركة بالكامل مع Shift.css
الرسوم المتحركة على شبكة الإنترنت يقدم وسيلة ل جذب انتباه الناس و ارسمهم أكثر إلى موقع على شبكة الإنترنت. هناك الكثير من الأدوات هناك ل إنشاء رسوم متحركة مجانية لكن Shift.css هي واحدة من أحدث في حفنة.
انه إطار عمل مفتوح المصدر مجاني صنع لخلق الرسوم المتحركة الديناميكية داخل أي حاوية. وهذه الرسوم المتحركة ليست مغلقة في تسلسل واحد. يمكنك في الواقع بناء الرسوم المتحركة المخصصة ل كل عنصر في الكتلة وتطبيق هذه في ترتيب معين.
ال تحول الصفحة التجريبية يمكن أن تظهر لك أفضل بكثير مما أستطيع أن أشرح في الكلمات.
شيء واحد ستلاحظه هو أن كل عنصر داخل الحاوية هو عنصر HTML منفصل. سواء كانت SVG أو صورة أو أي شيء ، يمكنك تحريك كل شيء على حدة إنشاء تأثير الرسوم المتحركة المخصصة الخاصة بك.
المكتبة تأتي مع ملفين ، أ .المغلق و .شبيبة مكتبة ، وكلاهما بحاجة إلى أن يكون إضافة إلى رأس المستند الخاص بك.
لا يمكنني العثور على ريبو GitHub لهذا المشروع ، لذلك ستحتاج قم بتنزيل الملفات مباشرة من موقع Shift.css.
والخطوة التالية هي ل تحديد عنصر الحاوية مع بعض المحتويات. أسماء الفصول مهمة حتى يحتاج كل عنصر متحرك إلى ذلك لديك الصف .تحول عنصر مستعمل.
جنبا إلى جنب مع هذه الفئات ، يمكنك أيضا إضافة سمات بيانات HTML5 لتحديد كيفية عمل الرسوم المتحركة. يوجد الآن ثلاثة فقط ، لكن يجب أن يكونوا كافيين لتخصيص تأثير الحركة الكامل.
- بيانات الرسوم المتحركة: اسم الرسوم المتحركة
- تأخير البيانات: التأخير الكلي (بالثواني) قبل بدء الحركة
- بيانات المدة: الطول الكلي (بالثواني) للرسوم المتحركة
يجب أن يكون اسم الرسوم المتحركة الرسوم المتحركة محددة مسبقا تم إنشاؤها لمكتبة التحول. الآن هناك 15 أسماء الرسوم المتحركة للاختيار من بينها. يمكنك رؤيتها مدرجة في أسفل الصفحة الرئيسية Shift.css.
مجرد نسخ ولصق أيا كان ما تريد في إعداد اسم الرسوم المتحركة ويجب أن تكون جيدة للذهاب! على سبيل المثال ، إذا كنت أرغب في استخدام الرسم المتحرك للخروج ، سأضيفه الرسوم المتحركة البيانات = "shift_exitFade" كسمة البيانات إلى أي عنصر يجب تنشيط هذه الطريقة. سهل جدا.
أتمنى أن تأتي هذه المكتبة بمزيد من الخيارات في جافا سكريبت لأنها ستتيح للمطورين مزيدًا من التحكم في الموضع والميزات. لكن بالنسبة لإطار رسوم متحركة بسيط (ومجاني) لا يمكنني الشكوى.
Shift.css مثالية ل المطورين الجدد الذين يريدون إنشاء أنماط الرسوم المتحركة أكثر تعقيدا دون كتابة رمز مطول من الصفر.
