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

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

هذه الرسوم المتحركة لها بعض الفوائد المهمة:

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

مع إليمنتور برو، فمن السهل تنفيذ هذه الرسوم المتحركة وجعل موقعك الإلكتروني الحياة.

الخطوة 1: إعداد هيكل صفحتك في Elementor Pro

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

إنشاء قسم جديد:

1. مفتوح إيليمنتور، أضف صفحة جديدة، واستخدم Elementor Edit للانتقال إلى صفحة التحرير.

2. انقر على "إضافة حاوية جديدة" على الصفحة.

3. اختر تخطيط من عمودين مع الجانب الأيسر لإضافة محتوى نصي (مثل العنوان و نص داعم) والجانب الأيمن لإضافة صورة للتحسين البصري.

إضافة محتوى:

1. العمود الأيسر: إضافة أداة العنوان و أداة نصية لعرض المعلومات الأساسية على الصفحة.

2. العمود الأيمن:: إضافة أداة الصورة لوضع صورة مرئية ذات صلة لإضافة جاذبية بصرية للصفحة.

يمكن تعديل كل مكوِّن لإكمال العناصر المطلوبة. هذا الإعداد البسيط يمهد الطريق لتصميم فعال قبل البدء في إضافة الرسوم المتحركة.

الخطوة 2: إضافة رسوم متحركة للتمرير إلى عنوانك الرئيسي

دعنا نحرك العنوان بحيث ينزلق بسلاسة من اليسار أثناء تمرير المستخدم لأسفل.

تحديد عنصر واجهة العنوان:

• انقر على أداة العنوان لفتح إعداداتها.

تمكين تأثيرات التمرير:

• انتقل إلى علامة التبويب خيارات متقدمة.

• تحت مؤثرات الحركةقم بتشغيل تأثيرات التمرير.

ضبط التمرير الأفقي:

• تمكين تمرير أفقي التأثير.

• اضبط الاتجاه على "من اليسار إلى اليمين“

• اضبط السرعة على حوالي 4 للحصول على تأثير سلس ومرئي.

معاينة:

عند تمرير الصفحة، سترى العنوان ينزلق من اليسار. يمكنك تعديل السرعة والاتجاه حتى تحصل على التأثير المطلوب.

الخطوة 3: إضافة تأثير المنظر إلى الصورة

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

تحديد عنصر واجهة الصورة:

• انقر على أداة الصورة وافتح إعداداتها.

تمكين تأثيرات التمرير:

• ضمن علامة التبويب خيارات متقدمة، قم بتشغيل تأثيرات التمرير.

تطبيق التمرير العمودي:

• مكِّن التمرير الرأسي واضبط السرعة على 1.5 تقريبًا. سيؤدي ذلك إلى إنشاء تأثير منظر خفي وسلس، حيث تتحرك الصورة ببطء أكثر من النص.

إضافة تغييرات التعتيم:

• التمكين الشفافية تحت خيارات التمرير.

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

سيؤدي ذلك إلى ظهور الصورة تدريجياً، مما يضيف عمقاً إلى التجربة البصرية.

الخطوة 4: إنشاء مرئي متعدد الطبقات باستخدام المنظر

لتحسين التصميم بشكل أكبر، يمكنك إضافة تأثيرات المنظر إلى عناصر أخرى، مثل صور الخلفية.

إضافة صورة خلفية:

• انقر على الحاوية الخارجية للقسم الخاص بك وانتقل إلى علامة التبويب النمط.

• أضف صورة خلفية.

تمكين تأثيرات التمرير للخلفية:

• في علامة التبويب خيارات متقدمة، قم بتمكين تأثيرات التمرير.

• اضبط سرعة التمرير الرأسي على 0.5 تقريبًا، بحيث تتحرك الخلفية أبطأ من العناصر الأمامية.

معاينة:

أثناء التمرير لأسفل، سترى تأثيرًا ديناميكيًا بالكامل: ينزلق العنوان إلى الداخل، وتتحرك الصورة بتأثير المنظر، وتتحول الخلفية بمهارة في الخلف.

الخطوة 5: إضافة رسوم متحركة لتشغيل التمرير للنص

حدد أداة النص:

• انقر فوق مربع النص للدخول إلى واجهة إعداد النص.

تمكين تأثير التمرير:

1. انتقل إلى المتقدم علامة التبويب.
2. تحت مؤثرات الحركةتمكين التمرير التأثيرات.

اختر الشفافية لإنشاء تأثير باهت على النص.

تعيين الرسوم المتحركة الشفافية:

• قم بتعيين نطاق الشفافية من 0% (شفاف تمامًا) إلى 100% (مرئي بالكامل). سوف يتلاشى النص من شفاف إلى مرئي أثناء تمرير المستخدم للصفحة، مما يخلق انتقالاً سلساً.

اضبط نقطة الزناد:

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

الخطوة 6: إضافة تأثير الشريحة في التأثير

حدد تأثير الشريحة في التأثير:

• تحت متقدم > مؤثرات الحركة علامة التبويب، حدد في الرسوم المتحركة، ثم حدد انزلق للداخل من القائمة المنسدلة.

• يمكنك اختيار الانزلاق من اليسار، أو الانزلاق من اليمين، أو الانزلاق من الأسفل إلى الأعلى، حسب احتياجات التصميم الخاصة بك.

ينطبق هذا على جميع السيناريوهات التي تريد فيها تحسين المظهر المرئي لصفحة الويب وتفاعل المستخدم.

الخطوة 7: تحسين تجربة المستخدم

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

أبقِ الأمر بسيطاً: قد تؤدي كثرة الرسوم المتحركة إلى إرباك المستخدم. التزم ببعض المؤثرات الموضوعة بشكل جيد للحفاظ على المظهر الاحترافي.

تحسين الأجهزة المحمولة: لا تعمل كل الرسوم المتحركة بشكل جيد على الأجهزة المحمولة. في Elementor Pro، يمكنك إيقاف تشغيل رسوم متحركة محددة للجوال والكمبيوتر اللوحي للحفاظ على استجابة الموقع وسهولة استخدامه.

الاختبار عبر المتصفحات: يمكن أن تتصرف الرسوم المتحركة للتمرير بشكل مختلف عبر المتصفحات. اختبر دائمًا تصميمك في المتصفحات الشائعة لضمان الاتساق.

الخاتمة

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

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