تحسين انتقالات عتامة النص المستندة إلى التمرير باستخدام JavaScript

تأثيرات رؤية سلسة للرسوم المتحركة القائمة على التمرير

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

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

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

من خلال مراجعة كود JavaScript الحالي وتحسينه، نهدف إلى تحقيق المزيد من السلاسة والتحسين القائم على التمرير التحكم في التعتيم دون الحاجة إلى التعديلات اليدوية. دعونا نتعمق في الكود والحل.

تحسين التحكم في العتامة القائم على التمرير في JavaScript

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

يستخدم البرنامج النصي مستمع حدث التمرير لمراقبة موضع div (الذي يحتوي على الامتدادات) بالنسبة إلى إطار العرض. يتم استخدام طريقة `getBoundingClientRect()` للحصول على موضع القسم، والذي تتم مقارنته بعد ذلك بنسب ارتفاع النافذة المحددة مسبقًا (مثل 0.3 و0.6) التي تحدد متى يبدأ كل امتداد في التلاشي. يتم إجراء الحسابات لضبط العتامة لكل فترة بناءً على موقعها النسبي، مما يضمن سلاسة الانتقال بين الحالات المخفية والمرئية.

لكل فترة، يتم ضبط العتامة باستخدام صيغة الاستيفاء الخطي. تأخذ هذه الصيغة في الاعتبار موضع العنصر بين نطاق البداية والنهاية (على سبيل المثال، بين 30% و60% من إطار العرض). أثناء قيام المستخدم بالتمرير، تزداد العتامة تدريجيًا من 0 إلى 1 ضمن هذا النطاق. يتم استخدام الدالتين `Math.min()` و`Math.max()` للتأكد من أن قيم العتامة لا تتجاوز 1 أو تقل عن 0، مما يضمن انتقالًا صالحًا ويمنع أي مشكلات في العرض.

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

// Solution 1: Scroll-Based Opacity with Sticky and Absolute Elements
window.addEventListener('scroll', function() {
  const message = document.querySelector('.message');
  const span1 = document.querySelector('.message > span');
  const span2 = document.querySelector('.vh > span');
  const rect = message.getBoundingClientRect();
  const windowHeight = window.innerHeight;
  const fadeStart1 = windowHeight * 0.3, fadeEnd1 = windowHeight * 0.6;
  const fadeStart2 = windowHeight * 0.5, fadeEnd2 = windowHeight * 0.9;
  // Opacity calculation for span1
  let opacity1 = Math.min(Math.max((fadeEnd1 - rect.top) / (fadeEnd1 - fadeStart1), 0), 1);
  span1.style.opacity = opacity1;
  // Opacity calculation for span2
  let opacity2 = Math.min(Math.max((fadeEnd2 - rect.top) / (fadeEnd2 - fadeStart2), 0), 1);
  span2.style.opacity = opacity2;
});

// Solution 2: Scroll-Based Opacity with Intersection Observer
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    const target = entry.target;
    target.style.opacity = entry.intersectionRatio;
  });
}, { threshold: [0, 0.5, 1] });
// Selecting elements for observation
observer.observe(document.querySelector('.message > span'));
observer.observe(document.querySelector('.vh > span'));

// Solution 3: Unit Test for Opacity Control
describe('Scroll Opacity Control', function() {
  it('should update span1 opacity on scroll', function() {
    const span1 = document.querySelector('.message > span');
    window.dispatchEvent(new Event('scroll'));
    expect(span1.style.opacity).not.toBe('0');
  });
  it('should update span2 opacity on scroll', function() {
    const span2 = document.querySelector('.vh > span');
    window.dispatchEvent(new Event('scroll'));
    expect(span2.style.opacity).not.toBe('0');
  });
});

التقنيات المتقدمة للتحكم في التعتيم القائم على التمرير

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

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

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