كان Animate.css حوالي بضع سنوات حتى الآن ويجب أن أعترف بأنني تأخرت كثيرًا عن الحفلة. لقد اكتشفت ذلك قبل شهرين فقط أثناء البحث في شبكة الإنترنت عن بعض دروس الرسوم المتحركة لـ CSS ووجدت أن أسرع وأسهل طريقة لتحريكها هي Animate.css.
يعد Animate.css ، الذي تم إنشاؤه من قبل رجل يدعى Dan Eden ، طريقة سريعة لمعرفة كيفية عمل CCS والحصول على بعض الإجراءات المتحركة على موقع الويب الخاص بك.
يوصف بأنه "مجرد إضافة الماء CSS حيوية" Animate.css هو جزء من المرح مع جانب جدي. يسمح لمصممي الويب الهواة حتى مثلي للوصول بسرعة إلى أساسيات الرسوم المتحركة CSS وإنشاء تأثيرات بسيطة ولكنها فعالة لمواقع الويب. من العنوان الرئيسي المتحرك إلى الحركات الأكثر مشاركة ، يمكن لهذه الأداة القيام بذلك.
Animate.css
Animate.css متاح للتنزيل من GitHub وهي في الأساس مكتبة من تأثيرات CSS البسيطة التي تم جمعها في مكان واحد. كل الرسوم المتحركة هي معبأة بشكل جيد وجاهزة للاستخدام. كل ما عليك فعله هو العثور على الرسوم المتحركة التي تريدها وتطبيق الفصل الدراسي. هذا هو حقا كل ما هو عليه.
ليس عليك تنزيل المكتبة بأكملها إذا كنت لا ترغب في ذلك حيث يوجد 2500 سطر من التعليمات البرمجية داخلها. يمكنك زيارة موقع Animate.css والعثور على رسم متحرك والنقر فوق الارتباط Download Animate.css. يتم تحميل الفصل على صفحة ويب لتتمكن من نسخه واستخدامه كما تراه مناسبًا.
من الأسهل استخدام GitHub على الرغم من ذلك لأسفل للعثور على التأثير الذي تبحث عنه.
- انتقل إلى صفحة CSS GitHub.
- انقر على الرابط المصدر للوصول إلى قائمة العناصر.
- حدد نوع التأثير الذي تبحث عنه من القائمة. Bounce هو طالب الانتباه ، لذلك حدد الرابط attention_seekers.
- اختر bounce.css.
- انسخ الرمز وضعه على صفحتك لتطبيق الرسوم المتحركة.
هو حقا بهذه البساطة. من الواضح أنك تختار خيارات مختلفة للتأثيرات المختلفة ولكن النتيجة النهائية هي نفسها. الوصول إلى الكود الضروري للقيام بالرفع الثقيل على الصفحة.
بناء كائن متحرك باستخدام Animate.css
بناء شيء رائع مع Animate.css بسيط. إنها مجرد مسألة إيجاد رمز CCS وإضافته إلى CSS الخاص بك. إذا كان بإمكاني القيام بذلك ، يمكن لأي شخص!
الخيار الأول في صفحة Animate.css هو الارتداد ، لذلك دعونا نستخدم ذلك في هذا المثال.
- معجون ' ' في داخل في ورقة الأنماط الخاصة بك.
- ابحث عن CSS للرسوم المتحركة التي تريدها وأضفها إلى العنصر الذي تريد تحريكه. على سبيل المثال ، أضف " 'لإضافة هذا التأثير المرتد للاختبار ، صورة أو أيا كان.
- أضف كود CSS التالي لإنجاحه. مأخوذة من bounce.css أعلاه.
تضمين التغريدة
من ، 20 ٪ ، 53 ٪ ، 80 ٪ ، إلى {
الرسوم المتحركة ، توقيت وظيفة: مكعب بيزيير (0.215 ، 0.610 ، 0.355 ، 1.000) ؛
convert: translate3d (0،0،0)؛
}
40 ٪ ، 43 ٪
الرسوم المتحركة ، توقيت وظيفة: مكعب بيزيير (0.755 ، 0.050 ، 0.855 ، 0.060) ؛
convert: translate3d (0، -30px، 0)؛
}
70٪
الرسوم المتحركة ، توقيت وظيفة: مكعب بيزيير (0.755 ، 0.050 ، 0.855 ، 0.060) ؛
convert: translate3d (0، -15px، 0)؛
}
90٪
convert: translate3d (0، -4px، 0)؛
}
}
.وثب، ارتداد {
اسم الرسوم المتحركة:
تحويل الأصل: أسفل الوسط ؛
}
أخذ الرسوم المتحركة أكثر مع Animate.css
يضيف التسلسل أعلاه تأثير الارتداد عند تحميل الصفحة لأول مرة ، وهو أمر رائع ولكنه شيء لمرة واحدة. ماذا عن نضيفها إلى تحوم. وبهذه الطريقة ، عندما يحوم شخص ما فوق الاختبار ، فإنه يرتد. إنه ليس شيئًا سأفعله على موقع إنتاج ، ولكنه طريقة رائعة لإظهار كيف يعمل كل شيء.
أضف الكود التالي إلى CSS الخاص بك لإضافة تأثير الارتداد على مؤشر الماوس. في كل مرة يحوم الماوس فوق العنصر ، يجب أن يرتد.
.الإجماع: تحوم
-Webkit-animation-المدة: 1 ثانية ؛
- مدة الرسوم المتحركة - المدة: 1 ثانية ؛
-ms-animation-المدة: 1 ثانية ؛
مدة الرسوم المتحركة: 1 ثانية ؛
مدة الرسوم المتحركة: 1 ثانية ؛
-webkit-animation-ملء وضع: على حد سواء ؛
-moz-animation-ملء وضع: على حد سواء ؛
-ms-animation-ملء-وضع: كلاهما ؛
- وضع الرسوم المتحركة - ملء - الوضع: كلاهما ؛
وضع ملء الرسوم المتحركة:
}
إذا كنت تعرف CSS ، فستعرف أكثر مما أعرفه عن كيفية تطبيق تأثيرات مختلفة على إجراءات مختلفة. كمبتدئ ، تساعدني هذه والمكتبات المتوفرة في Animate.css على إنشاء رسوم متحركة أساسية لكنها فعالة لصفحات الويب الخاصة بي.
لا أعلم كم سأستخدمه على موقع ويب مباشر لأنهم لا ينخفضون دائمًا بشكل جيد ولا يبدو أن مستخدمي الجوال يحبونهم كثيرًا على الإطلاق. ومع ذلك ، كدرس في كيفية عمل CSS وكيف يمكن استخدامه لتحسين الويب ، فهو مورد رائع. أنا مجرد مبتدئ ، لكن حتى قضاء بضع ساعات مع Animate.css في هذا البرنامج التعليمي قد علمتني كثيرًا. أعتقد أنني سوف ألعب بها أكثر من ذلك بكثير قبل انتهائي. ماذا عنك؟
