स्क्रोल फेड, अब खत्म हो जाओ

• वेबसाइट पर स्क्रोल करते समय elements के धीरे-धीरे दिखाई देने वाले ‘scroll fade’ effect की आलोचना करते हुए, इसके visual discomfort और development complexity की ओर इशारा किया गया है
• बताया गया है कि ज्यादातर implementations हद से ज्यादा transition effects और गलत timing की वजह से user experience को खराब करती हैं और developers पर भी बोझ डालती हैं
• Accessibility समस्याएँ और vestibular disorders जैसी स्थितियों वाले वास्तविक users पर इसके नकारात्मक असर का उल्लेख किया गया है
• ऐसे effects performance गिरावट और Core Web Vitals (जैसे LCP) के बिगड़ने का कारण बन सकते हैं, और अक्सर इन्हें पर्याप्त testing और validation के बिना लागू कर दिया जाता है
• लेख का कहना है कि scroll fade कोई त्वरित समाधान नहीं, बल्कि शुरुआत से डिज़ाइन की जाने वाली एक जटिल सुविधा है, और इसे दृढ़ता से बंद करने की अपील करता है

---

स्क्रोल फेड की समस्याएँ

• scroll fade एक visual effect है जिसमें user के page नीचे ले जाने पर elements धीरे-धीरे दिखाई देने लगते हैं, और इसे अक्सर Y-axis transform के साथ इस्तेमाल किया जाता है
  • लेख इसे “भयानक अनुभव” कहता है और बताता है कि यह सभी users पर एक जैसा लागू कर दिया जाता है
• effect अगर बहुत सावधानी से fine-tune किया जाए तो शायद ठीक लगे, लेकिन ज्यादातर मामलों में इसका उपयोग जरूरत से ज्यादा होता है और यह visually असहज लगता है
  • ऐसे मामलों का ज़िक्र है जहाँ project लगभग पूरा होने पर “हर element पर fade लगा दो” जैसी मांग आ जाती है
• लेखक इसे “उबाऊपन हटाने की गलत कोशिश” मानता है और कहता है कि इससे साइट वास्तव में और भद्दी लगने लगती है

Accessibility और users पर असर

• कई developers ने accessibility समस्या को इसके खिलाफ मुख्य तर्क बताया
  • खासकर vestibular disorders वाले users को motion effects की वजह से असुविधा हो सकती है
  • CSS की prefers-reduced-motion media query से कुछ हद तक सुरक्षा मिल सकती है, लेकिन लेखक का तर्क है कि “motion डिफ़ॉल्ट रूप से बंद होना चाहिए और opt-in होना चाहिए”
• cognitive overload और ध्यान भंग की समस्याएँ भी उठाई गईं
  • खासकर यह कहा गया कि Apple devices पर बनी साइटें कई बार Windows, Linux और Android environments में अलग तरह से व्यवहार करती हैं

Testing और performance समस्याएँ

• scroll fade effect लागू करने से पहले वास्तविक user testing और performance validation की ज़रूरत पर जोर दिया गया है
  • यह देखना चाहिए कि user अब भी अपना काम कर पा रहे हैं या नहीं, और bounce rate बढ़ तो नहीं रही
  • अगर testing करने की इच्छा नहीं है, तो “यह जोखिम मत लो” जैसी चेतावनी दी गई है
• लेखक बताता है कि उसकी script ने Scott Jehl की “This CSS Will Self-Destruct” तकनीक का उपयोग किया
  • इसे JavaScript बंद होने की स्थिति के लिए एक protective approach के रूप में पेश किया गया है

Core Web Vitals और SEO पर असर

• बताया गया है कि scroll fade से Largest Contentful Paint (LCP) सहित Core Web Vitals metrics खराब होने की आशंका अधिक है
  • सीधे data नहीं दिए गए, लेकिन लेखक कहता है कि जिन साइटों की उसने पहले जांच की, उनमें “भयानक LCP” देखा गया
• SEO impact पर लेखक व्यंग्यपूर्ण और संशयपूर्ण रुख दिखाता है, यह कहते हुए कि “लोग तो यह भी कहते हैं कि Google कम गुणवत्ता वाला content देता है”
  • फिर भी, लेखक स्पष्ट करता है कि इस blog post का उद्देश्य इस effect को trend से बाहर करना है

निष्कर्ष: scroll fade पर प्रतिबंध की घोषणा

• “5 शानदार scroll fade effects” जैसे शीर्षक के नीचे “मत करो” को पाँच बार दोहराकर व्यंग्यात्मक समापन किया गया है
• जोर देकर कहा गया है कि scroll fade कोई quick fix नहीं है, बल्कि यह ऐसी जटिल सुविधा है जिसे पूरी साइट की संरचना को ध्यान में रखकर शुरुआत से डिज़ाइन करना चाहिए
• लेख का अंत इस मज़ाकिया सुझाव से होता है कि developers सामूहिक रूप से इसे ‘तकनीकी रूप से असंभव’ घोषित कर दें
• अंतिम संदेश साफ है: “स्क्रोल फेड, अब खत्म हो जाओ (Death to scroll fade)”

[GN⁺]

Hacker News की राय

• मुझे निजी तौर पर स्क्रॉल से जुड़ी एक चीज़ सच में बहुत नापसंद है
  वह है sticky header जो नीचे स्क्रॉल करने पर गायब हो जाता है और ऊपर स्क्रॉल करने पर फिर दिखने लगता है
  पेज को ऊपर-नीचे करते समय उसकी वह टिमटिमाती हरकत बहुत परेशान करती है
  uBlock जैसी किसी चीज़ से उसे हटाओ तो पेज के सबसे ऊपर भी हेडर गायब हो जाता है, जो दिक्कत बनता है

  • बिल्कुल सहमत। मेरी आदत है कि जो वाक्य मैं पढ़ रहा हूँ उसे हमेशा स्क्रीन के सबसे ऊपर रखता हूँ, इसलिए वाक्य को फिर से पढ़ने के लिए मुझे हर बार हेडर के पार जाना पड़ता है
  • सिर्फ़ desktop पर आसानी से इस्तेमाल किया जा सकता है, लेकिन एक काफ़ी संतोषजनक समाधान है
    Kill Sticky Headers नाम की script की सिफारिश करता हूँ
  • Safari में “Remove Distracting Elements” फीचर है
    कुछ websites इतनी बिखरी हुई होती हैं कि सच में उनके लिए ‘कीट-नियंत्रण टूल’ लेकर जाना पड़े

• “Reader Mode” कोई खास mode नहीं, बल्कि default browsing experience होना चाहिए
  बल्कि अगर किसी को भड़कीली styling चाहिए, तो उसे “Clown Mode” चालू करना चाहिए

  • मैं ऐसा reader mode चाहता हूँ जो पूरे पेज को एक लंबी image की तरह render कर दे, और फिर उसी को scroll किया जाए
    काश browser पेज से यह कहकर उसे धोखा दे पाता कि “सारा content पहले से ही स्क्रीन पर मौजूद है”
  • reader mode default नहीं है क्योंकि website बनाने वाले जानबूझकर उस फीचर को तोड़ न सकें, इसके लिए ऐसा किया गया है
  • macOS और iOS में reader mode को default के रूप में सेट किया जा सकता है
  • अच्छा होगा अगर पेज खुलते ही reader mode अपने-आप चालू हो जाए, और ज़रूरत पड़े तो कुछ सेकंड के भीतर ESC दबाकर उसे बंद किया जा सके
  • “Clown Mode” वाली अभिव्यक्ति बहुत मज़ेदार है। उससे पुराने Windows XP की “Fisher-Price” theme याद आ गई

• शुरू में मुझे लगा यह iOS की बात है
  iOS 26 से webpages के ऊपरी हिस्से में ग्रे fade-out होने लगा है, और यह बहुत परेशान करने वाला है
  text का रंग dynamically बदलता रहता है, जिससे नज़र बार-बार ऊपर खिंचती है
  Apple को ऐसी visual distraction का पता न हो, यह मानना मुश्किल है, इसलिए समझ नहीं आता उन्होंने ऐसा design क्यों किया

  • इससे भी बुरा उदाहरण यह है कि iOS की Music app ने playback controls को content के ऊपर ले जाकर transparent overlay की तरह रखा है
    उसके नीचे का content भी scroll fade होता है
  • “Reduce Transparency” चालू करने पर ऊपर और नीचे बस सफेद खाली जगह रह जाती है
    मेरा iPhone फिर से home button वाले दौर के design जैसा दिखने लगता है, जो काफ़ी मज़ेदार है

• कहा जाता है कि यह effect पूरे web में फैल चुका है, लेकिन मैंने इसे पहली बार अभी देखा
  आँखों के सामने animation चलती रहे तो मैं text पढ़ ही नहीं पाता
  फिर भी नीचे वाली goldfish animation अच्छी लगी, उसे अलग से इस्तेमाल करना चाहूँगा

  • Anthropic की sites पर यह effect अक्सर दिखता है
    उदाहरण के लिए Claude Agents page पर भी यह साफ़ दिखता है
    लगता है Claude की style guide दूसरे LLM-आधारित sites तक भी फैल गई है
  • सच कहें तो ऐसे effects SaaS marketing pages पर बहुत आम हैं
    सिर्फ़ साधारण fade-in ही नहीं, side से slide होकर आने वाले effects भी खूब दिखते हैं
  • मैं भी जब एक site redesign कर रहा था, तब Claude ने ऐसा animation सुझाया था
    अगर Claude इसे इतने आत्मविश्वास से recommend कर रहा है, तो शायद बहुत लोग पहले से ही उसका अनुसरण कर रहे हैं
  • सही तरह से implement किया जाए तो यह नज़र को दिशा देने वाला सूक्ष्म और सुखद effect बन सकता है
    यह site तो उसे जानबूझकर बढ़ा-चढ़ाकर दिखाने वाला उदाहरण है
  • history-of-animation.webflow.io जैसी site भी देखने लायक है

• मुझे लगता है यह scroll fade trend bug से पैदा हुई एक गलतफ़हमी है
  शुरू में यह images की lazy loading की वजह से होने वाली flicker थी
  फिर designers ने उसे इरादतन effect समझ लिया और सोचा, “इसे सुंदर fade बना देते हैं”

  • लेकिन असल में यह सिर्फ़ अतिरिक्त design दिखावा है, ताकि चीज़ें “cool” लगें
    इसमें content से ज़्यादा scroll पर ही अजीब तरह का obsession दिखता है
  • फिर भी, यह सिर्फ़ bug से अलग कोई स्वतंत्र धारा भी लगती है

• मैं तो इससे भी आगे जाकर कहना चाहूँगा — parallax scroll भी खत्म हो जाना चाहिए
  काश सारे scroll animations गायब हो जाएँ

  • scroll बस एक साधारण क्रिया होनी चाहिए जिसमें fixed size view ऊपर-नीचे खिसकता है
  • हाँ, सूक्ष्म image parallax ठीक है
    लेकिन हर element का अपनी मर्ज़ी से अलग-अलग speed पर चलना सबसे खराब है
  • मैं animation के ख़िलाफ़ नहीं हूँ, लेकिन बिना मकसद उसके अति-उपयोग से वह ketchup ज़्यादा डाले हुए खाने जैसा लगने लगता है
  • scroll events को override करना तो मुझे खास तौर पर नापसंद है
    वह Vimium की smooth scrolling को खराब कर देता है

• यह page सच में motion sickness पैदा करने वाली चीज़ों का अंतिम स्तर है
  मुझे बचपन से ही भयंकर motion sickness रही है, और आज भी bus या elevator मेरे लिए कष्टदायक हैं
  इस page को कुछ सेकंड देखना ही मुझे उल्टी जैसा महसूस कराने लगा, इसलिए मैंने तुरंत reader mode चालू कर दिया
  फिर भी, ऐसी समस्याओं को लेकर जागरूकता बढ़ रही है, यह देखकर अच्छा लगता है

  • मुझे भी बिल्कुल ऐसी ही गंभीर motion sickness है
    अगर मैं driver seat पर न बैठूँ तो बहुत तकलीफ़ होती है, और दूसरे लोग उसे समझ नहीं पाते
    खासकर बार-बार accelerate और decelerate करने की driving habit सचमुच यातना जैसी लगती है
  • अच्छा लगा कि सिर्फ़ मैं ही ऐसा नहीं हूँ
    इसे कुछ मिनट देखना ही migraine शुरू कराने के लिए काफ़ी था
  • मुझे motion sickness नहीं है, फिर भी यह page देखकर मतली महसूस हुई
    यह सच में बहुत भयानक अनुभव था

• मैंने पहले एक ऐसे client के साथ काम किया था जिसे scrolljacking बहुत पसंद था
  उसने जैसे ही parallax effect खोजा, वह पूरी तरह उसी में डूब गया, और आख़िरकार उसने मुझे निकाल दिया
  अब वह site iPhone 16+ को छोड़कर हर device पर lag करती है

• आख़िरी detail भी नज़र में आई — वह हिस्सा जहाँ selection करने पर text दिखता ही नहीं
  वास्तविकता में, इतनी बारीकियों तक ध्यान देने वाली पढ़ने में मुश्किल sites बहुत कम होती हैं

  • आम तौर पर वे text selection को ही रोक देते हैं ताकि “पवित्र text” की रक्षा की जा सके

• animation संभालते समय मैं एक बहुत सरल नियम इस्तेमाल करता हूँ

  animationCount = 0
  animateElement(el) {
    el.animate({duration: BASE_DURATION / animationCount})
    animationCount++
  }
  

  यानी, दोहराव बढ़ने पर animation duration घटा दी जाती है
  शुरुआत में असर तेज़ होता है, लेकिन धीरे-धीरे छोटा होता जाता है, जिससे कुल मिलाकर हल्का और फुर्तीला एहसास मिलता है