تعزز الرسوم المتحركة النصية تفاعلية الموقع الإلكتروني، مما يجعل تجربة المستخدم أكثر جاذبية. يشرح هذا الدليل كيفية إنشاء خطوة بخطوة, رسوم متحركة نصية تتلاشى سطراً بسطر باستخدام إيليمنتور لإضفاء تأثيرات ديناميكية وجذابة بصرياً على موقعك الإلكتروني.

لماذا استخدام الرسوم المتحركة الباهتة؟

تجعل الرسوم المتحركة الباهتة المحتوى الخاص بك أكثر حيوية وتساعد في توجيه الانتباه إلى العناصر المهمة. يؤدي الكشف عن النص سطرًا بسطر إلى تجنب إغراق المستخدمين بالكثير من المعلومات ويخلق تجربة قراءة أكثر تنظيماً.

خطوات إنشاء رسوم متحركة تتلاشى سطراً بسطر

تثبيت Elementor وتفعيله

قبل الاستخدام العنصر الميزات، تأكد من تثبيت الإضافة وتفعيلها:

1. سجِّل الدخول إلى لوحة تحكم ووردبريس الخاصة بك.
2. انتقل إلى المكونات الإضافية > إضافة جديد المكوّن الإضافي.
3. البحث عن إيليمنتور وانقر فوق التثبيت الآن.

4. بمجرد التثبيت، انقر فوق تفعيل.

إليمنتور برو يفتح المزيد من ميزات الرسوم المتحركة المتقدمة، والتي سنستكشفها لاحقًا.

إضافة عنصر واجهة جانبي نصي

• مفتوح أو إنشاء صفحة/منشور جديد في ووردبريس وتحريره باستخدام Elementor.
• من لوحة الأداة، اسحب عنصر واجهة المستخدم محرر النصوص إلى الموقع المطلوب في صفحتك.

تعمل هذه الأداة كأساس لتأثير التلاشي.

تطبيق الرسوم المتحركة المدمجة في Elementor

• حدد أداة النص.
• في اليد اليسرى اللوحة، انقر على متقدم علامة التبويب.

• يرجى التمرير لأسفل إلى مؤثرات الحركة وتوسيعه.

• في رسوم متحركة للمدخل القائمة المنسدلة، اختر التلاشي في.

هذا يطبق رسم متحرك أساسي للتلاشي. الخطوات التالية تُنشئ التأثير سطراً بسطر.

تنفيذ تأثير التلاشي سطراً بسطر

لتحقيق التلاشي سطراً بسطر, الانفصال النص إلى مقاطع متعددة وتحريك كل منها على حدة.

• تقسيم النص إلى عدة أسطر: قسّم المحتوى إلى أسطر أو جمل منفصلة وضع كل منها في أداة النص الخاصة بها.
• تعيين رسوم متحركة فردية: كرر الخطوات المذكورة أعلاه لكل أداة نصية لتطبيق التلاشي الرسوم المتحركة، مما يضمن الاتساق.
• إضافة تأخير الرسوم المتحركة: تعيين تأخيرات مختلفة لكل أداة نصية. على سبيل المثال:
  • السطر 1: تأخير 0.2 ثانية
  • الخط 2: 0.4 ثانية تأخير 0.4 ثانية
  • الخط 3: 0.6 ثانية تأخير 0.6 ثانية

يؤدي تداخل التأخيرات إلى إنشاء تأثير تلاشي سلس ومتسلسل.

مثال على النص:

لنفترض أنك تريد أن يظهر النص التالي سطراً بسطر:

"مهمتنا هي تقديم الجودة. نحن نعطي الأولوية لرضا العملاء. ونبتكر معاً من أجل المستقبل."

تفصيل خطوة بخطوة:

1. السطر 1:
   • النص: "مهمتنا هي تقديم الجودة."
   • إضافة محرر النصوص في عنصر واجهة المستخدم في Elementor.
   • أدخل هذه الجملة كنص.
   • قم بتطبيق التلاشي في الرسوم المتحركة وضبط التأخير على 0.2 ثانية.

2. السطر 2:
   • النص: "نحن نعطي الأولوية لرضا العملاء."
   • إضافة أخرى محرر النصوص القطعة.
   • أدخل هذه الجملة كنص.
   • قم بتطبيق التلاشي في الرسوم المتحركة وضبط التأخير على 0.4 ثانية.

3. السطر 3:
   • النص: "معاً، نبتكر معاً من أجل المستقبل."
   • إضافة أخرى محرر النصوص القطعة.
   • أدخل هذه الجملة كنص.
   • قم بتطبيق التلاشي في الرسوم المتحركة وضبط التأخير على 0.6 ثانية.

ستتلاشى كل جملة بالتتابع أثناء تمرير المستخدم أو عند تشغيل الرسوم المتحركة، مما يخلق تأثير انتقال سلس.
تضمن هذه الطريقة ظهور كل سطر من النص بشكل منفرد، مع تأخير بسيط بين كل سطر، لتعزيز إمكانية القراءة وخلق تأثير بصري ديناميكي.

تأثيرات التلاشي المتقدمة مع Elementor Pro

يوفر Elementor Pro مزيداً من التحكم، بما في ذلك التأثيرات التي يتم تشغيلها بالتمرير للحصول على تجربة ديناميكية.

• تمكين تأثيرات التمرير: في مؤثرات الحركة قسم، قم بتشغيل تأثيرات التمرير لتشغيل الرسوم المتحركة أثناء تمرير المستخدم.

• إضافة الشفافية: في إعدادات التمرير، حدد التلاشي في تحت الشفافية بحيث يظهر النص تدريجياً أثناء التمرير.

• ضبط السرعة والاتجاه: ضبط السرعة والاتجاه بدقة لتتناسب مع سلوك التمرير، مما يعزز التفاعل.

المعاينة والنشر

بعد إعداد الرسوم المتحركة، قم بمعاينة الصفحة للتأكد من أن كل شيء يعمل كما هو متوقع:

• انقر فوق معاينة في الجزء السفلي الأيسر من محرر Elementor.
• قم بالتمرير خلال الصفحة للتأكد من أن كل سطر يتلاشى بالتتابع.
• إذا كان التأثير صحيحاً، انقر فوق النشر لجعل الصفحة مباشرة.

الخاتمة

في الختام، يعد إنشاء رسوم متحركة نصية تتلاشى سطراً بسطر باستخدام Elementor طريقة رائعة لتعزيز تفاعل المستخدم من خلال تقديم المحتوى بطريقة واضحة وجذابة بصرياً. من خلال التوقيت الدقيق للرسوم المتحركة وإضافة التأخيرات، يمكنك ضمان استيعاب المستخدمين للمعلومات بوتيرة مريحة، مما يمنع التحميل الزائد للمعلومات. بالنسبة لأولئك الذين يريدون المزيد من التحكم، يقدم Elementor Pro ميزات إضافية مثل الرسوم المتحركة التي يتم تشغيلها بالتمرير وخيارات التخصيص الأخرى. بعد إعداد كل شيء، قم بمعاينة النتائج وانشر صفحتك لإنشاء تجربة تفاعلية سلسة وتفاعلية لزوارك.