تصغير العنوان عند الانتقال في الصفحة

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

كيفية الإعداد

في ما يلي كيفية إنشاء عنوان يتقلّص عند الانتقال للأسفل:

1. إنشاء رأس ثابت: ابدأ بعنصر رأس ثابت في أعلى الصفحة وله ارتفاع محدّد مسبقًا.

   <header>HEADER</header>
   

   header {
     position: fixed;
     height: 200px;
     top: 0;
     left: 0;
     right: 0;
   }
   

2. تحديد الحركة الخاصة بالتصغير: أنشِئ حركة CSS تغيّر ارتفاع العنوان.

   @keyframes shrink {
     to {
       height: 50px;
     }
   }
   

3. تطبيق الحركة والمخطط الزمني للتمرير: اربط الحركة بالعنوان واستخدِم الدالة scroll() لربطها بموضع التمرير في المستند.

   header {
     animation: shrink auto linear both;
     animation-timeline: scroll(block root);
   }
   

4. ضبط السمة animation-range: استخدِم السمة animation-range لتحديد مسافة الانتقال التي يجب أن تحدث فيها الحركة. على سبيل المثال، لتصغير العنوان على أول 150 بكسل من التمرير، يمكنك استخدام animation-range: 0px 150px;.

   header {
     animation-range: 0px 150px;
   }
   

ملاحظة: لمنع حجب المحتوى الذي يلي العنوان، أضِف padding-top إلى body (أو حاوية المحتوى الرئيسي) يساوي الارتفاع الأولي للعنوان.

ملاحظة: للتأكّد من أنّ محتوى الصفحة يتم الانتقال إليه بالتزامن مع تصغير العنوان، اضبط السمة animation-range-end على الفرق بين حجمَي البداية والنهاية. يضمن ذلك اكتمال الحركة بدقة عندما يصل العنوان إلى حجمه النهائي. في هذا العرض التوضيحي، يتقلّص حجم العنوان من 200px إلى 50px، لذا يتم ضبط السمة animation-range-end على 150px.

مثال على الرمز

@keyframes shrink {
  to {
    height: 50px;
  }
}

header {
  animation: shrink auto linear both;
  animation-timeline: scroll(block root);
  animation-range: 0px 150px;
}

أفضل الممارسات

عند استخدام الصور المتحركة المستندة إلى الانتقال، من المهم اتّباع بعض أفضل الممارسات لضمان تجربة سلسة وسهلة الاستخدام:

• يجب تضمين ميزة رصد الميزات: لا تتيح بعض المتصفّحات استخدام الصور المتحركة المستندة إلى الانتقال للأعلى أو للأسفل. استخدِم @supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) للتحقّق من توفّر الدعم وتوفير خيار احتياطي للمتصفّحات التي لا تتيح هذه الميزة.
  • يجب تضمين عملية التحقّق من (animation-range: 0% 100%) هنا لفلترة المتصفّحات التي توفّر دعمًا جزئيًا فقط.
  • لا تستخدِم حزمة scroll-timeline-polyfill لاستراتيجية الاحتياط لأنّها لا تتضمّن جميع الميزات وتحتوي على الكثير من المشاكل المعروفة.
  • إذا كانت الحركة تُعتبر زخرفية فقط، فاختَر "التحسين التدريجي" ولا تقدّم بديلاً.
• يجب احترام الإعدادات المفضّلة للمستخدمين: يفضّل بعض المستخدمين تقليل الحركة على الويب. استخدِم الاستعلام عن الوسائط prefers-reduced-motion لإيقاف الصور المتحركة أو تقليلها لهؤلاء المستخدمين.
• يُرجى محاولة تحريك خصائص CSS ذات الأداء العالي فقط: للحصول على صور متحركة أكثر سلاسة، التزِم بتحريك الخصائص التي يمكن معالجتها من خلال سلسلة عمليات التجميع في المتصفّح، مثل transform وopacity. قد تؤدي إضافة تأثيرات حركية إلى سمات أخرى، مثل width أو height، إلى حدوث مشاكل في الأداء.
• يجب استخدام ترتيب التعريف الصحيح: عند استخدام السمة المختصرة animation، يجب تعريف animation-timeline وanimation-range بعدها لمنع السمة المختصرة من إعادة ضبط المخطط الزمني.

عند استخدام الدالة scroll() لإنشاء تأثير حركي مستند إلى الانتقال:

• اختياري: حدِّد شريط التمرير بوضوح: عندما لا تستهدف أقرب شريط تمرير رئيسي، حدِّد بوضوح شريط التمرير الذي تريد استخدامه مع scroll(root) أو scroll(self).
  • عندما لا تكون السمة root أو nearest أو self كافية، استخدِم مخططًا زمنيًا للتمرير يحمل اسمًا.
• اختياري: حدِّد المحور الذي تريد تتبُّعه: عندما لا تستهدف المحور التلقائي block (كما هو الحال في شريط التمرير الأفقي)، حدِّد المحور الذي تريد تتبُّعه باستخدام scroll(block) أو scroll(inline).

بالنسبة إلى حالة الاستخدام هذه تحديدًا:

• يجب ألا يكون العنصر الذي تحرّكه position: static أو position: relative عند استخدام النسب المئوية في animation-range.
  • ويعود السبب في ذلك إلى أنّ هذه العناصر تُعتبر "مضمّنة"، وبالتالي فإنّ تصغيرها أثناء الانتقال للأسفل سيؤدي إلى تقليل إجمالي مسافة الانتقال، ما يؤثر في القيمة المحسوبة، على سبيل المثال، 10% في الانتقال للأسفل.

توافق المتصفّح واستراتيجيات الاحتياط

لذلك، عادةً ما تكون هناك حاجة إلى استراتيجية احتياطية.

بالنسبة إلى المتصفّحات التي لا تتيح استخدام الصور المتحركة المستندة إلى الانتقال للأعلى أو للأسفل، يمكنك استخدام خيار احتياطي لإعادة إنشاء التأثيرات المرئية. يتم عادةً إنشاء الإجراءات الاحتياطية باستخدام أداة استماع للتمرير (لتأثيرات ScrollTimeline) أو واجهة برمجة التطبيقات IntersectionObserver (لتأثيرات ViewTimeline).

في المتصفّحات التي تتضمّن دعمًا مدمجًا للصور المتحركة المستندة إلى الانتقال، استخدِم دائمًا تنفيذ CSS الأصلي لأنّها أكثر فعالية.

يُرجى العِلم أنّه لا يمكن إعادة إنشاء كل تأثير باستخدام نهج الإجراءات الاحتياطية.

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

// Fallback for browsers that don't support scroll-driven animations
if (!CSS.supports('(animation-timeline: scroll()) and (animation-range: 0% 100%)')) {
  const header = document.querySelector('header');

  const initialHeight = 200;
  const finalHeight = 50;
  const scrollDistance = 150;

  window.addEventListener('scroll', () => {
    const scrollY = window.scrollY;
    const scrollPercent = Math.min(1, scrollY / scrollDistance);
    const newHeight = initialHeight - (initialHeight - finalHeight) * scrollPercent;

    header.style.height = `${newHeight}px`;
  });
}