إعداد الرسوم المتحركة
تتيح لك Slidde.co تطبيق الرسوم المتحركة القياسية باستخدام CSS keyframe على عناصر الويب الخاصة بك بسهولة. إليك دليل خطوة بخطوة لمساعدتك على البدء.
خيار الرسوم المتحركة في الشريط الجانبي
- اختر عنصراً: انقر على أي عنصر في صفحتك.
- افتح نافذة الرسوم المتحركة: في الشريط الجانبي الأيمن، قم بالتمرير إلى الأسفل حيث ستجد خيار الرسوم المتحركة. انقر عليه لفتح نافذة.
استخدام الرسوم المتحركة المسبقة
- ابدأ بالرسوم المتحركة المسبقة: نوصي بالبدء بالرسوم المتحركة المسبقة التي يمكنك تعديلها لتناسب احتياجاتك.
- اعثر على المزيد من الرسوم المتحركة المسبقة: يمكنك العثور على قائمة بالرسوم المتحركة المسبقة في Animate.css. إذا كنت بحاجة إلى رسوم متحركة معينة، أخبرنا وسنضيفها إلى القائمة.
تخصيص الرسوم المتحركة
تسهل نافذة الرسوم المتحركة عملية إعداد CSS keyframe في واجهة منخفضة الكود، مما يجعلها متاحة حتى إذا لم تكن على دراية بالبرمجة.
الرسوم المتحركة باستخدام keyframe هي حيث تحدد خصائص CSS لنسب معينة. ويتولى المتصفح عملية الانتقال نيابة عنك.
على سبيل المثال، إذا كان لديك keyframes مثل هذا بمدة 4 ثوانٍ.
0% translateX(0)
50% translateX(-20px)
100% trasnlateX(0)
سيتحرك الكائن 20 بكسل نحو الأسفل لمدة ثانيتين، ثم يتحرك 20 بكسل للأعلى ليعود إلى موضعه الأصلي لمدة ثانيتين.
إذا واجهت أي مشاكل أو أردت معرفة المزيد عن الرسوم المتحركة باستخدام keyframe:
- ابحث عبر الإنترنت: ابحث في جوجل عن أسئلتك المحددة؛ هناك الكثير من الأمثلة والموارد المتاحة.
- دليل CSS Keyframes: ارجع إلى دليل CSS keyframes الرسمي على MDN للحصول على معلومات شاملة.
تحريك العناصر الفرعية
يمكنك استهداف العناصر الفرعية للعنصر الجذري عن طريق تعيين Targets إلى &>*.
تأخير متدرج
إذا قمت بتغيير التأخير إلى القيم التالية، سيتم تطبيق تأثير متدرج.
targets: &>*
delay: anime.stagger(100) // زيادة التأخير بمقدار 100 مللي ثانية لكل عنصر.
targets: &>*
delay: anime.stagger(100, {start: 500}) // يبدأ التأخير عند 500 مللي ثانية ثم يزيد بمقدار 100 مللي ثانية لكل عنصر.
لمزيد من الأمثلة، يرجى الاطلاع هنا أساسيات التدرج
تدرج النص
يعمل هذا مع مكون نص.
إذا قمت بتعيين الأهداف إلى "جميع الحروف" (& .letter). سيتم تطبيق تأثير التدرج على كل حرف.
استخدام خاصية animation في CSS
دائمًا ما تكون الرسوم المتحركة في CSS متاحة لجميع العناصر في أنماط مخصصة. ولكن قد تحتاج إلى تفعيل تعطيل في اللوحة لتلك القاعدة المحددة في CSS للسماح بتعديل أسهل في المحرر.