Scroll-triggered animations can be a game-changer for your website, enhancing its interactivity and making the content more engaging. As users scroll down, animations bring depth to your page, grabbing attention and making the browsing experience more immersive. If you’re using إليمنتور برو, adding these animations is straightforward. Here’s a guide to help you get started and make the most of these effects, including parallax animations for a more layered design.
لماذا استخدام الرسوم المتحركة التي يتم تشغيلها بالتمرير؟
هذه الرسوم المتحركة لها بعض الفوائد المهمة:
- تسليط الضوء على العناصر المهمة: تلفت الرسوم المتحركة الانتباه بشكل طبيعي، مما يساعدك على إبراز الأقسام المهمة في موقعك.
- تحسين تفاعل المستخدم: نظرًا لأن المحتوى يكشف عن نفسه تدريجيًا، فمن المرجح أن يستمر المستخدمون في المشاركة.
- احكي قصة: يمكن لكيفية ظهور المحتوى أن ترشد المستخدم عبر صفحتك، خطوة بخطوة، مع الحفاظ على اهتمامه.
مع إليمنتور برو, it’s easy to implement these animations and bring your website to الحياة.
الخطوة 1: إعداد هيكل صفحتك في Elementor Pro
Before you start animating, you need to set up the basic structure of your page. For example, let’s say you’re creating a hero section with a headline, an image, and supporting text.
إنشاء قسم جديد:
- مفتوح إيليمنتور، أضف صفحة جديدة، واستخدم Elementor Edit للانتقال إلى صفحة التحرير.
- Click the “إضافة حاوية جديدة” button on the page.
- اختر تخطيط من عمودين مع الجانب الأيسر لإضافة محتوى نصي (مثل العنوان و نص داعم) والجانب الأيمن لإضافة صورة للتحسين البصري.
إضافة محتوى:
- العمود الأيسر: إضافة أداة العنوان و أداة نصية لعرض المعلومات الأساسية على الصفحة.
- العمود الأيمن:: إضافة أداة الصورة لوضع صورة مرئية ذات صلة لإضافة جاذبية بصرية للصفحة.
يمكن تعديل كل مكوِّن لإكمال العناصر المطلوبة. هذا الإعداد البسيط يمهد الطريق لتصميم فعال قبل البدء في إضافة الرسوم المتحركة.
الخطوة 2: إضافة رسوم متحركة للتمرير إلى عنوانك الرئيسي
Let’s animate the headline so it smoothly slides in from the left as the user scrolls down.
تحديد عنصر واجهة العنوان:
- انقر على أداة العنوان لفتح إعداداتها.
تمكين تأثيرات التمرير:
- انتقل إلى علامة التبويب خيارات متقدمة.
- تحت مؤثرات الحركةقم بتشغيل تأثيرات التمرير.
ضبط التمرير الأفقي:
- تمكين تمرير أفقي التأثير.
- Set the direction to “من اليسار إلى اليمين"
- اضبط السرعة على حوالي 4 للحصول على تأثير سلس ومرئي.
معاينة:
When you scroll the page, you’ll see the headline slide in from the left. You can tweak the speed and direction until you get the desired effect.
الخطوة 3: إضافة تأثير المنظر إلى الصورة
To make your page more dynamic, we’ll now add a parallax effect to the image. The image moves at a different speed from the text, creating a layered, 3D-like effect.
تحديد عنصر واجهة الصورة:
- انقر على أداة الصورة وافتح إعداداتها.
تمكين تأثيرات التمرير:
- ضمن علامة التبويب خيارات متقدمة، قم بتشغيل تأثيرات التمرير.
تطبيق التمرير العمودي:
- مكِّن التمرير الرأسي واضبط السرعة على 1.5 تقريبًا. سيؤدي ذلك إلى إنشاء تأثير منظر خفي وسلس، حيث تتحرك الصورة ببطء أكثر من النص.
إضافة تغييرات التعتيم:
- التمكين الشفافية تحت خيارات التمرير.
- قم بتعيين الشفافية مستوى يتراوح بين 0% (شفاف بالكامل) إلى 100% (مرئي بالكامل)مما يسمح للصورة بالتلاشي تدريجيًا أثناء تمرير المستخدم لأسفل الصفحة. اضبط شريط تمرير منفذ العرض للتحكم في وقت بدء تأثير التلاشي واكتماله، مما يعزز تجربة التمرير مع انتقال مرئي سلس.
سيؤدي ذلك إلى ظهور الصورة تدريجياً، مما يضيف عمقاً إلى التجربة البصرية.
الخطوة 4: إنشاء مرئي متعدد الطبقات باستخدام المنظر
لتحسين التصميم بشكل أكبر، يمكنك إضافة تأثيرات المنظر إلى عناصر أخرى، مثل صور الخلفية.
إضافة صورة خلفية:
- انقر على الحاوية الخارجية للقسم الخاص بك وانتقل إلى علامة التبويب النمط.
- أضف صورة خلفية.
تمكين تأثيرات التمرير للخلفية:
- في علامة التبويب خيارات متقدمة، قم بتمكين تأثيرات التمرير.
- اضبط سرعة التمرير الرأسي على 0.5 تقريبًا، بحيث تتحرك الخلفية أبطأ من العناصر الأمامية.
معاينة:
As you scroll down, you’ll see a fully dynamic effect: the headline slides in, the image moves with a parallax effect, and the background shifts subtly in the back.
الخطوة 5: إضافة رسوم متحركة لتشغيل التمرير للنص
حدد أداة النص:
- انقر فوق مربع النص للدخول إلى واجهة إعداد النص.
تمكين تأثير التمرير:
- انتقل إلى المتقدم علامة التبويب.
- تحت مؤثرات الحركةتمكين التمرير التأثيرات.
اختر الشفافية لإنشاء تأثير باهت على النص.
تعيين الرسوم المتحركة الشفافية:
- قم بتعيين نطاق الشفافية من 0% (شفاف تمامًا) إلى 100% (مرئي بالكامل). سوف يتلاشى النص من شفاف إلى مرئي أثناء تمرير المستخدم للصفحة، مما يخلق انتقالاً سلساً.
اضبط نقطة الزناد:
- في تأثير التمرير يمكنك ضبط إعدادات منفذ العرض النسبة المئوية لتحديد مكان بدء التمرير ونهايته للرسوم المتحركة. على سبيل المثال، تعيين الرسوم المتحركة لتشغيلها عندما يقوم المستخدم بالتمرير بين 20% و80% من تسمح الصفحة بظهور النص مع محتوى الصفحة.
الخطوة 6: إضافة تأثير الشريحة في التأثير
حدد تأثير الشريحة في التأثير:
- تحت متقدم > مؤثرات الحركة علامة التبويب، حدد في الرسوم المتحركة، ثم حدد انزلق للداخل من القائمة المنسدلة.
- يمكنك اختيار الانزلاق من اليسار، أو الانزلاق من اليمين، أو الانزلاق من الأسفل إلى الأعلى، حسب احتياجات التصميم الخاصة بك.
This applies to all scenarios where you want to enhance a web page’s visual appeal and user interactivity.
الخطوة 7: تحسين تجربة المستخدم
يمكن للرسوم المتحركة التي يتم تشغيلها بالتمرير أن تعزز الموقع الإلكتروني بشكل كبير، ولكن يجب أن تحافظ على سلاسة تجربة المستخدم. إليك بعض النصائح:
أبقِ الأمر بسيطاً: قد تؤدي كثرة الرسوم المتحركة إلى إرباك المستخدم. التزم ببعض المؤثرات الموضوعة بشكل جيد للحفاظ على المظهر الاحترافي.
تحسين الأجهزة المحمولة: لا تعمل كل الرسوم المتحركة بشكل جيد على الأجهزة المحمولة. في Elementor Pro، يمكنك إيقاف تشغيل رسوم متحركة محددة للجوال والكمبيوتر اللوحي للحفاظ على استجابة الموقع وسهولة استخدامه.
الاختبار عبر المتصفحات: يمكن أن تتصرف الرسوم المتحركة للتمرير بشكل مختلف عبر المتصفحات. اختبر دائمًا تصميمك في المتصفحات الشائعة لضمان الاتساق.
الخاتمة
Scroll-triggered animations and parallax effects can transform your website, making it more engaging and visually appealing. With Elementor Pro’s features, you can implement anything from subtle text animations to complex, layered designs. When done right, these effects guide the user’s attention, tell a story through your content, and create a seamless browsing experience across all devices.
باتباع هذه الخطوات، يمكنك إنشاء صفحات ويب ديناميكية وغامرة تجذب المستخدمين مع الحفاظ على التصميم عمليًا وسريع الاستجابة.