إعداد الرسوم المتحركة
Slidde.co تتيح لك تطبيق الرسوم المتحركة القياسية باستخدام CSS keyframe على عناصر الويب الخاصة بك بسهولة. إليك دليل خطوة بخطوة لمساعدتك على البدء.
خيار الرسوم المتحركة في الشريط الجانبي
- اختر عنصراً: انقر على أي عنصر في صفحتك.
- افتح نافذة الرسوم المتحركة: في الشريط الجانبي الأيمن، انقر على زر علامة التبويب الرسوم المتحركة، ستجد خيار الرسوم المتحركة. انقر عليه لفتح نافذة.
- ابدأ بالقوالب الجاهزة: نوصي بالبدء بالرسوم المتحركة الجاهزة، والتي يمكنك تعديلها لاحقًا لتناسب احتياجاتك. يمكنك النقر على أزرار القوالب لاستبدالها بقالب جاهز. إذا نقرت على أيقونة زائد في الزر، سيتم إضافة القالب إلى الرسوم المتحركة الحالية.
تخصيص الرسوم المتحركة
تسهل نافذة الرسوم المتحركة عملية إعداد الرسوم المتحركة باستخدام CSS keyframe في واجهة منخفضة الكود، مما يجعلها متاحة حتى إذا لم تكن على دراية بالبرمجة.
الرسوم المتحركة باستخدام keyframe هي حيث تحدد خصائص CSS لنسب معينة. والمتصفح يتولى الانتقال نيابة عنك.
على سبيل المثال، إذا كان لديك keyframes مثل هذا بمدة 4 ثوانٍ.
0% translateX(0)
50% translateX(-20px)
100% trasnlateX(0)
سيتحرك الكائن 20 بكسل نحو الأسفل لمدة ثانيتين، ثم يتحرك 20 بكسل للأعلى ليعود إلى موضعه الأصلي لمدة ثانيتين.
إذا واجهت أي مشاكل أو أردت معرفة المزيد عن الرسوم المتحركة باستخدام keyframe:
- ابحث عبر الإنترنت: ابحث في جوجل عن أسئلتك المحددة؛ هناك الكثير من الأمثلة والموارد المتاحة.
- دليل CSS Keyframes: ارجع إلى دليل CSS keyframes الرسمي على MDN للحصول على معلومات شاملة.
محفز
هذا الحقل يتحكم في توقيت تشغيل الرسوم المتحركة.
- العنصر المعروض: هذا هو الخيار الافتراضي. سيتم تشغيل الحركة عندما يتم تمرير العنصر إلى العرض، أو عندما يتم عرض القسم المحتوي قسم الهاش
- العنصر المعروض (إعادة التشغيل في كل مرة): نفس الخيار السابق، باستثناء أن الحركة ستُعاد تشغيلها في كل مرة يُعرض فيها العنصر.
- تم تحميل الصفحة: سيتم تشغيل الحركة عند تحميل الصفحة.
الهدف(الأهداف)
عادةً لا تحتاج إلى تعيين هذا. القيمة الافتراضية هي & والتي تعني العنصر الجذري.
ومع ذلك، هناك بعض الحالات التي ستحتاج فيها إلى تعيينه.
لتحريك عنصر الخلفية المتقدمة، يمكنك تعيين الهدف(الأهداف) إلى أول عنصر فرعي، حيث سيكون عنصر الخلفية المتقدمة دائمًا هو الطفل الأول للعنصر الجذري.
لتطبيق تأخير متدرج على جميع عناصر الأطفال. اقرأ المزيد في قسم التأخير والتأخير المتدرج لمزيد من التفاصيل.
التأخير والتأخير المتدرج
إذا قمت بتعيين تأخير إلى 1000ms، ستبدأ الحركة بعد الانتظار لمدة 1000ms.
إذا قمت بتعيين تأخير إلى 50ms وقمت بتعيين الأهداف إلى جميع العناصر الفرعية المباشرة. سيتم تطبيق الحركة على كل عنصر من عناصر الأطفال المباشرين، والانتظار لـ
- العنصر الأول، 1000ms،
- العنصر الثاني، 1050ms،
- العنصر الثالث، 1100ms،
- ...
تأخير النص المتدرج
يعمل هذا مع مكون نص.
إذا قمت بتعيين تأخير وقمت بتعيين الأهداف إلى جميع الحروف. سيتم تطبيق تأثير التأخير المتدرج على كل حرف.
استخدام خاصية animation في CSS
دائمًا ما تكون حركة CSS العادية متاحة لجميع العناصر في CSS. ولكن قد تحتاج إلى تشغيل Disable in canvas لتلك القاعدة المحددة في CSS للسماح بتعديل أسهل في المحرر.