المنظر هو التأثير الذي يتم فيه تمرير أجزاء مختلفة من الصفحة بسرعات مختلفة، وبالتالي تنجرف الخلفية بشكل أبطأ من المقدمة ويلتقط القسم إحساسًا بالعمق. ال امتداد ريلاكس في ماستر أدونز برو يضيف ذلك عنصر التمرير المنظر التأثير على عناصر واجهة المستخدم مثل صورة أو عنوان، باستخدام مكتبة Rellax.js، دون لمس سطر من JavaScript. يظهر كقسم في علامة التبويب المتقدمة للعنصر، مع عناصر تحكم في السرعة ونسبة الحركة ومؤشر z والاتجاه.
هذا هو المكان الذي يعيش فيه Rellax، وما يفعله كل إعداد، وكيف يبدو التأثير بمجرد بث الصفحة مباشرة.
ما يفعله امتداد Rellax #
يقوم Rellax بتثبيت رسوم متحركة تعتمد على التمرير على أي عنصر تحدده. أثناء قيام الزائر بالتمرير، يتحرك هذا العنصر بشكل أسرع أو أبطأ من بقية الصفحة، اعتمادًا على السرعة التي تحددها. أشر إليها على صورة البطل وتنزلق الخلفية؛ أشر إليها على عنوان رئيسي ويطفو النص أمام كل شيء حولها. نظرًا لأنه يعمل لكل عنصر، يمكنك مزج سرعتين مختلفتين في نفس القسم وإنشاء تمرير متعدد الطبقات بدون مكون إضافي مخصص لاختلاف المنظر.
فكر في الأمر على أنه ابن عم قائم على التمرير لأداتين أخريين للحركة من Master Addons التأثيرات العائمة، الذي يحرك عنصرًا من تلقاء نفسه دون أي تمرير، و يحول، الذي يتعامل مع التدوير والقياس والانحراف.
قبل أن تبدأ #
- ووردبريس مع العنصر مثبتة ونشطة.
- ماستر أدونز برو تم تثبيته بترخيص نشط، نظرًا لأن Rellax هو امتداد Pro. إذا لم تكن قد قمت بتثبيته بعد، فاتبع دليل التثبيت.
- تم تمكين ملحق Rellax في لوحة خيارات Master Addons.
- عنصر واجهة مستخدم للتحريك، مثل صورة أو رمز أو عنوان التدرج. يقوم Rellax بتحريك الأداة بأكملها، وليس صورة خلفية للقسم.
كيفية إضافة تأثير اختلاف المنظر في العنصر #
حدد العنصر الذي تريد نقله. افتح متقدم علامة التبويب في لوحة Elementor ثم قم بالتمرير لأسفل إلى ريلاكس القسم (يحمل شارة Master Addons الأرجوانية). قم بتوسيعها وقلبها تمكين ريلاكس إلى نعم. هذا التبديل هو المفتاح للتأثير بأكمله، لذلك لا يحدث شيء حتى يتم تشغيله.
شيء واحد يعرقل الناس: يتم تشغيل اختلاف المنظر فقط على الصفحة المباشرة أو في المعاينة، وليس أثناء التحرير على اللوحة القماشية. لذا لا تنتظر حتى يتحرك العنصر داخل المحرر، اضغط على المعاينة لرؤيته.
شرح إعدادات ريلاكس #
مع تمكين Rellax، تشكل بقية عناصر التحكم كيفية انتقال العنصر
- سرعة: مدى سرعة تحرك العنصر بالنسبة للتمرير. الأرقام الموجبة الأعلى تجعله يتحرك للأعلى بشكل أسرع أثناء التمرير لأسفل؛ الأرقام السالبة تدفعه في الاتجاه الآخر. يستخدم العرض التوضيحي 6. ابدأ من 4 إلى 6 تقريبًا واضبط من هناك، نظرًا لأن القيم الكبيرة يمكن أن تدفع عنصرًا نظيفًا خارج قسمه.
- نسبة: نقطة البداية للرسوم المتحركة، من 0 إلى 1، بناءً على مكان وجود العنصر في إطار العرض. العرض التوضيحي يضبطه على 0.4. ادفع هذا عندما يبدأ التأثير مبكرًا جدًا أو متأخرًا جدًا.
- مؤشر Z: ترتيب التراص، نفس فكرة CSS z-index. ارفعه (الاستخدامات التجريبية 3) عندما يحتاج عنصر اختلاف المنظر إلى الجلوس أعلى أو أسفل جار، فإنه يتداخل في منتصف التمرير.
- عمودي: حرك العنصر لأعلى ولأسفل أثناء تمرير الصفحة. هذا هو اتجاه اختلاف المنظر المعتاد.
- أفقي: حرك العنصر إلى اليسار واليمين بدلاً من ذلك. مفيد للعناصر التي تريد الانزلاق من الجانب.
تحتوي كل من السرعة والنسبة المئوية على أيقونة الاستجابة بجانبهما، بحيث يمكنك تعيين قيم مختلفة لسطح المكتب والكمبيوتر اللوحي والهاتف المحمول. وهذا يهم أكثر مما يبدو. يمكن أن تبدو السرعة التي تبدو رائعة على سطح مكتب عريض متناقضة على الهاتف، حيث تكون الشاشة قصيرة ويغطي العنصر مساحة كبيرة في مساحة صغيرة. عادةً ما يكون خفض سرعة الهاتف المحمول هو الحل.
راجع تأثير اختلاف المنظر على الصفحة المباشرة #
انشر الصفحة (أو افتح المعاينة) وقم بالتمرير. العنصر الذي قمت بتمكين Rellax من التحرك بالسرعة التي تناسبه بينما يتم تمرير بقية الصفحة بشكل طبيعي، وهذا الفرق في السرعة هو ما يبيع العمق. هذا هو البطل التجريبي، مع صورة اختلاف المنظر التي يتم تمريرها مقابل عنوان “Scroll UP”:
إذا كانت الحركة قوية جدًا أو دقيقة جدًا، فارجع إلى التحكم في السرعة وقم بتعديلها. يعد Parallax أحد تلك التأثيرات التي يقرأ فيها عدد صغير عادةً بشكل أفضل من العدد الكبير.
حالات الاستخدام الشائعة #
- صور البطل: امنح عنصر واجهة مستخدم الصورة في بطل الصفحة المقصودة انجرافًا بطيئًا حتى يشعر القسم بأنه حي في اللحظة التي يقوم فيها شخص ما بالتمرير.
- العناوين العائمة: ضع Rellax على العنوان بحيث يرتفع قبل المحتوى الموجود أسفله.
- أقسام الطبقات: اضبط عنصرين أو ثلاثة على سرعات مختلفة في نفس القسم للحصول على تمرير مكدس ومتعدد العمق.
- وسائل الشرح المميزة: قم بتمرير أيقونة أو شارة أفقيًا عند وصول الزائر إليها.
- صفحات القصص: استخدم اختلاف المنظر اللطيف بين الكتل لمنع التمرير الطويل من الشعور بالسطح.
بالنسبة للحركة غير المرتبطة بالتمرير، قم بإقران Rellax بـ الرسوم المتحركة المدخل لذا، تتحرك العناصر كما تظهر، ثم تستمر في التحرك مع اختلاف المنظر مع استمرار التمرير. تصفح بالكامل الحاجيات والإضافات قائمة لرؤية بقية مجموعة أدوات الحركة.
فيديو تعليمي #
تفضل المشاهدة؟ يمر هذا الفيديو عبر امتداد Rellax من النهاية إلى النهاية، بدءًا من تمكينه على عنصر وحتى تمرير اختلاف المنظر على الصفحة المباشرة
الأسئلة المتداولة #
كيف يمكنني إضافة تأثير تمرير اختلاف المنظر في Elementor؟
حدد عنصرًا، وافتح علامة التبويب "متقدم"، وقم بتوسيع قسم "إضافة رئيسية" إلى "Rellax"، وقم بتعيين "تمكين Rellax" إلى "نعم". ثم قم بتعيين السرعة والنسبة المئوية. يتم تمرير العنصر بالسرعة التي تناسبه على الصفحة المباشرة، ولا يلزم وجود رمز.
لماذا لا أستطيع رؤية تأثير اختلاف المنظر في محرر Elementor؟
يعمل Rellax فقط على الواجهة الأمامية. يظل العنصر ثابتًا أثناء التحرير على اللوحة القماشية، لذا افتح المعاينة أو شاهد الصفحة المنشورة لرؤية حركة اختلاف المنظر.
ماذا يفعل إعداد السرعة في Rellax؟
تتحكم السرعة في مدى سرعة تحرك العنصر مقارنة بتمرير الصفحة. تعمل القيم الإيجابية الأعلى على تحريكه لأعلى بشكل أسرع أثناء التمرير لأسفل، بينما تعكس القيم السالبة الاتجاه. تعمل القيم من 4 إلى 6 بشكل جيد بالنسبة لمعظم أقسام الأبطال.
هل يمكنني استخدام سرعة اختلاف المنظر مختلفة على الهاتف المحمول؟
نعم. تستجيب عناصر التحكم في السرعة والنسبة المئوية، لذا يمكنك تعيين قيم منفصلة لسطح المكتب والكمبيوتر اللوحي والهاتف المحمول. يؤدي خفض السرعة على الهاتف المحمول إلى منع التأثير من الشعور بالعدوانية الشديدة على الشاشات الصغيرة.
هل يؤدي امتداد Rellax إلى إبطاء موقعي؟
يقوم Rellax بتشغيل رسوم متحركة تعتمد على التمرير لكل عنصر، وبالتالي يظل التأثير صغيرًا. قم بتطبيقه فقط على العناصر التي تحتاج إليه، بدلاً من كل كتلة في الصفحة، وستظل الأمور سلسة.
إلتحاق بالركب #
يعد ملحق Rellax أسرع طريقة لإضافة ملف عنصر التمرير المنظر التأثير بدون مكون إضافي منفصل أو رمز مخصص. قم بتمكينه على أي عنصر، وقم بتعيين السرعة والنسبة المئوية ومؤشر z والاتجاه، ويتم تمرير العنصر بعمق حقيقي على الصفحة المباشرة. لمزيد من الطرق لتحريك الأشياء حول الشاشة، قم بإلقاء نظرة عليها يحول و التأثيرات العائمة، وانظر صفحة تمديد المنظر Rellax للمقارنة مع Elementor Pro Motion Effects.
