التلاشي عند التمرير: نمط يضر بتجربة المستخدم فتوقف عنه

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

تأثيرات الظهور التدريجي عند التمرير، وما يسميه بعض المطورين «scroll reveal»، أصبحت من أكثر الأنماط انتشاراً على الويب. وهي أيضاً من أكثرها عداءً لتجربة المستخدم. فهي تبطئ الأداء المُدرَك، وتكسر قابلية الوصول، وتعيق تصفح المحتوى بالعين، ولا تضيف أي فهم حقيقي للصفحة. حان وقت التوقف عن استخدامها.

ضد التلاشي عند التمرير

مشكلات هذا النمط ليست طفيفة، بل جوهرية.

المحتوى غير مرئي حتى تصل إليه بالتمرير. يبدو هذا بديهياً، لكن فكّر في معناه. إذا مرّر المستخدم بسرعة ليجد قسماً محدداً، كجدول الأسعار أو مقارنة الميزات أو المواصفات التقنية، فسيرى صفحة فارغة إلى أن تلحق التأثيرات بالتمرير. المحتوى موجود في DOM لكنه مخفي خلف opacity: 0 وانتقال CSS لم يُطلق بعد. من يمرر بسرعة لا يرى شيئاً. ومن يستخدم البحث داخل الصفحة (Ctrl+F) يصل إلى نص غير مرئي. وبعض المستخدمين الذين يعتمدون على التقنيات المساعدة قد لا يُطلقون أحداث التمرير أصلاً.

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

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

ضريبة الأداء

لتأثيرات التلاشي عند التمرير تكلفة حقيقية على الأداء، حتى عند تحسينها. صحيح أن Intersection Observer API أفضل من مستمعي أحداث التمرير، لكن النمط ما زال يتطلب تشغيل JavaScript وحساب نسب التقاطع وتعديل عناصر DOM أثناء التمرير. في صفحة تضم 50 عنصر ظهور تدريجي، يعني ذلك 50 مراقباً يعملون مع كل حركة تمرير.

// The "modern" approach — still problematic
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
// Each of these triggers a style recalculation
// and potentially a layout/paint operation
}
});
}, { threshold: 0.1 });
// Observing 50+ elements on a landing page
document.querySelectorAll('.fade-in').forEach(el => {
observer.observe(el);
});
// Plus the CSS:
// .fade-in { opacity: 0; transform: translateY(20px); transition: 0.6s; }
// .fade-in.visible { opacity: 1; transform: translateY(0); }

المشكلة الأكبر في الأداء هي Cumulative Layout Shift (CLS). فالعناصر التي تبدأ بـ opacity: 0 مع إزاحة translateY ثم تتحرك إلى موضعها النهائي قد تسبب إزاحات في التخطيط إذا لم تُعالج بعناية. وتعاقب Core Web Vitals من Google هذا السلوك، وكثير من تطبيقات التلاشي تُسهم في درجات CLS تضر بترتيب البحث، وهذا عكس ما تريده المواقع التسويقية تماماً.

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

ضرر على قابلية الوصول

المستخدمون الذين يعانون اضطرابات الجهاز الدهليزي، وهي فئة تضم نحو 35% من البالغين فوق سن الأربعين، قد يشعرون بالدوار أو الغثيان أو التشويش بسبب تأثيرات الحركة. واستعلام الوسائط prefers-reduced-motion وُجد تحديداً لمعالجة هذه المشكلة، لكن كثيراً من تطبيقات التلاشي عند التمرير تتجاهله تماماً.

/* The bare minimum, which most sites skip */
@media (prefers-reduced-motion: reduce) {
.fade-in {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}

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

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

لماذا يستمر هذا النمط

إذا كان التلاشي عند التمرير بهذه المشكلات، فلماذا هو منتشر في كل مكان؟ لثلاثة أسباب.

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

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

ثالثاً، قوالب ومكتبات المكونات تضمّنه افتراضياً. Framer Motion وAOS وScrollReveal وGSAP ScrollTrigger تجعل إضافة تأثيرات التمرير سهلة للغاية. وعندما تحتاج الإضافة إلى سطر واحد من السمات، تنتشر في كل مكان. تكلفة التنفيذ منخفضة لدرجة أن أحداً لا يتوقف ليسأل إن كان التأثير يخدم المستخدم.

متى تفيد الحركة فعلاً

الحركة ليست سيئة بطبيعتها. فالرسوم المتحركة أداة واجهة مشروعة عندما تخدم أحد هذه الأغراض:

• إظهار السبب والنتيجة. ضغطة زر تؤدي إلى انزلاق لوحة توضح العلاقة بين الفعل والنتيجة. وهذا يساعد المستخدم على بناء نموذج ذهني للواجهة.
• توجيه الانتباه. نبضة خفيفة على شارة الإشعارات تلفت النظر إلى معلومة جديدة. وهذا استباقي، أي أن النظام هو من يوجه الانتباه، بخلاف التأثير التفاعلي الذي ينتظر التمرير.
• الحفاظ على السياق المكاني. الانتقالات المتحركة بين الشاشات، مثل انتقال الدفع والسحب في تنقل iOS، تساعد المستخدم على فهم موقعه داخل التسلسل الهرمي. بدونها يبدو التغيير مفاجئاً ومزعجاً.
• تقديم ردود الفعل. مؤشر التحميل وشريط التقدم والشاشات الهيكلية (skeleton) تُخبر المستخدم بأن شيئاً ما يحدث، وتقلل من زمن الانتظار المُدرَك.

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

البديل الأفضل

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

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

استخدم رسوم CSS المتحركة المرتبطة بالتمرير. الخاصيتان الجديدتان animation-timeline: scroll() وanimation-timeline: view() تتيحان إنشاء تأثيرات مرتبطة بالتمرير دون JavaScript. وهي مُسرَّعة بوحدة معالجة الرسوميات، ولا تسبب إزاحات في التخطيط، وتتدهور بسلاسة عند عدم الدعم. وإذا كنت لا بد فاعلاً فهذه هي الطريقة الصحيحة.

/* CSS scroll-driven animation — no JavaScript needed */
.parallax-bg {
animation: parallax linear;
animation-timeline: scroll();
}
@keyframes parallax {
from { transform: translateY(0); }
to { transform: translateY(-50px); }
}
/* Respects user preferences automatically */
@media (prefers-reduced-motion: reduce) {
.parallax-bg {
animation: none;
}
}

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

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

اقتل أحبّاءك

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

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

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