ريلاكس

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

هذا هو المكان الذي يعيش فيه Rellax، وما يفعله كل إعداد، وكيف يبدو التأثير بمجرد بث الصفحة مباشرة.

ما يفعله امتداد Rellax #

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

فكر في الأمر على أنه ابن عم قائم على التمرير لأداتين أخريين للحركة من Master Addons التأثيرات العائمة، الذي يحرك عنصرًا من تلقاء نفسه دون أي تمرير، و يحول، الذي يتعامل مع التدوير والقياس والانحراف.

قبل أن تبدأ #

• ووردبريس مع العنصر مثبتة ونشطة.
• الإضافات الرئيسية للعنصر مثبت ونشط. إذا لم تكن قد قمت بتثبيته بعد، فاتبع دليل التثبيت.
• تم تمكين ملحق Rellax في لوحة خيارات Master Addons.
• عنصر للتحريك. تعمل أي عنصر واجهة مستخدم Elementor أو Master Addons، بما في ذلك الصورة، أ عنوان التدرج، أو قسم.

كيفية إضافة تأثير اختلاف المنظر في العنصر #

حدد العنصر الذي تريد نقله. افتح متقدم علامة التبويب في لوحة Elementor ثم قم بالتمرير لأسفل إلى ريلاكس القسم (يحمل شارة Master Addons الأرجوانية). قم بتوسيعها وقلبها تمكين ريلاكس إلى نعم. هذا التبديل هو المفتاح للتأثير بأكمله، لذلك لا يحدث شيء حتى يتم تشغيله.

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

شرح إعدادات ريلاكس #

مع تمكين Rellax، تشكل بقية عناصر التحكم كيفية انتقال العنصر

• سرعة: مدى سرعة تحرك العنصر بالنسبة للتمرير. الأرقام الموجبة الأعلى تجعله يتحرك للأعلى بشكل أسرع أثناء التمرير لأسفل؛ الأرقام السالبة تدفعه في الاتجاه الآخر. يستخدم العرض التوضيحي 6. ابدأ من 4 إلى 6 تقريبًا واضبط من هناك، نظرًا لأن القيم الكبيرة يمكن أن تدفع عنصرًا نظيفًا خارج قسمه.
• نسبة: نقطة البداية للرسوم المتحركة، من 0 إلى 1، بناءً على مكان وجود العنصر في إطار العرض. العرض التوضيحي يضبطه على 0.4. ادفع هذا عندما يبدأ التأثير مبكرًا جدًا أو متأخرًا جدًا.
• مؤشر Z: ترتيب التراص، نفس فكرة CSS z-index. ارفعه (الاستخدامات التجريبية 3) عندما يحتاج عنصر اختلاف المنظر إلى الجلوس أعلى أو أسفل جار، فإنه يتداخل في منتصف التمرير.
• عمودي: حرك العنصر لأعلى ولأسفل أثناء تمرير الصفحة. هذا هو اتجاه اختلاف المنظر المعتاد.
• أفقي: حرك العنصر إلى اليسار واليمين بدلاً من ذلك. مفيد للعناصر التي تريد الانزلاق من الجانب.

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

راجع تأثير اختلاف المنظر على الصفحة المباشرة #

انشر الصفحة (أو افتح المعاينة) وقم بالتمرير. العنصر الذي قمت بتمكين Rellax من التحرك بالسرعة التي تناسبه بينما يتم تمرير بقية الصفحة بشكل طبيعي، وهذا الفرق في السرعة هو ما يبيع العمق. هذا هو البطل التجريبي، مع صورة اختلاف المنظر التي يتم تمريرها مقابل عنوان “Scroll UP”:

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

حالات الاستخدام الشائعة #

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

بالنسبة للحركة غير المرتبطة بالتمرير، قم بإقران Rellax بـ الرسوم المتحركة المدخل لذا، تتحرك العناصر كما تظهر، ثم تستمر في التحرك مع اختلاف المنظر مع استمرار التمرير. تصفح بالكامل الحاجيات والإضافات قائمة لرؤية بقية مجموعة أدوات الحركة.

فيديو تعليمي #

تفضل المشاهدة؟ يمر هذا الفيديو عبر امتداد Rellax من النهاية إلى النهاية، بدءًا من تمكينه على عنصر وحتى تمرير اختلاف المنظر على الصفحة المباشرة

الأسئلة المتداولة #

إلتحاق بالركب #

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