المحرر والكتابة·3 min read·

أضف خلفية متحركة إلى قسم

امنح كتلة الحاوية (Container) صورة خلفية تنساب أبطأ من الصفحة أثناء التمرير، وحدّد مدى حركتها، وأوقفها على الهواتف.

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

تفعيل الخلفية المتحركة

  1. افتح صفحة في منشئ الصفحات وحدّد كتلة حاوية (Container). التأثير متاح للحاويات فقط، ولا يظهر هذا الخيار في الكتل الأخرى.
  2. في لوحة المعاينة (Inspector)، افتح تبويب «النمط» ثم قسم «الخلفية»، واختر خلفية من نوع صورة.
  3. ضمن «التأثير» (Effect)، اختر «Parallax».
  4. استخدم «القوة» (Strength) لتحديد المسافة التي يُسمح للصورة بقطعها. يتراوح المدى بين 5 و50، والقيمة الافتراضية 20. كلما ارتفعت القيمة تحركت الصورة مسافة أكبر.

يمكنك رؤية التأثير داخل المحرر أيضًا: مرّر اللوحة وستنساب الصورة. تملأ الصورة القسم دائمًا، فلا تظهر حافة أو فجوة عند أي موضع من التمرير.

إيقاف التأثير على الهواتف

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

لماذا لا نستخدم خيار «Fixed»؟

في خيار «الإرفاق» (Attach) ضمن اللوحة نفسها قيمة «Fixed» تبدو مشابهة على متصفح سطح المكتب. لكنها لا تعمل على أجهزة iPhone وiPad، إذ تتمرر الصورة ببساطة مع الصفحة، كما تتعطل داخل الأقسام التي تستخدم تأثيرات الحركة. صُمّم Parallax ليعمل بالطريقة نفسها على جميع الأجهزة، فاستخدمه بدلًا منها. وإذا كانت الحاوية مضبوطة على «Fixed» فستعرض اللوحة زر «Use parallax instead».

خلفيات التمرير بالمؤشر لا تظهر

إذا كانت للحاوية نفسها خلفية عند تمرير المؤشر (Hover)، فإن هذه الخلفية تُرسم تحت الصورة المتحركة، ولذلك لا تظهر ما دام التأثير مفعّلًا. للحصول على تغيير ظاهر عند تمرير المؤشر، استخدم حالة التمرير لشيء آخر مثل الإطار أو الظل أو الشفافية، أو أوقف التأثير لهذه الحاوية.

الزوار الذين يفضّلون تقليل الحركة

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

لإزالة التأثير، أعِد «التأثير» إلى «None». تبقى الصورة خلفية عادية.