स्क्रॉल करते समय पेज के साथ नीचे चलने वाला Scroll Bar Buddy विकसित

 (focusfurnace.com)
1 पॉइंट द्वारा GN⁺ 2025-03-04 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • Scroll Buddy पहला prototype है जो मौजूदा scrollbar को पेज के किनारे चलने वाले animated character में बदल देता है, जिससे scrolling अपने-आप में एक छोटी interaction बन जाती है
  • मौजूदा implementation scroll position के हिसाब से ऊपर-नीचे चलने वाले stick figure के रूप में है, और यह boring scrollbar को एक मज़ेदार decorative element में बदलने का प्रयोग है
  • अगले candidates के रूप में skateboarder, rock climber, squirrel सुझाए गए हैं, और दूसरे character ideas भी स्वीकार किए जा रहे हैं
  • इसे अपनी website पर लगाना चाहने वाले users के लिए एक application form उपलब्ध कराया गया है
  • पेज के side में दिया गया example motion वाला है, इसलिए vestibular motion sickness वाले readers के लिए असुविधाजनक हो सकता है; और reduce motion setting चालू होने पर अधिकांश browsers में इसे छिप जाना चाहिए

scrollbar को character में बदलने वाला prototype

  • Scroll Buddy एक experiment है जो scrollbar को केवल UI element न रखकर, scroll करते समय पेज के किनारे साथ-साथ चलने वाले animated character में बदलता है
  • पहले prototype में user के scroll करने पर ऊपर-नीचे चलता हुआ stick figure character इस्तेमाल किया गया है
  • बाद के versions के candidates में skateboarder, rock climber, squirrel जैसे दूसरे प्रकार के Scroll Buddy शामिल हैं

website पर लगाने के लिए application

  • अपनी website में Scroll Buddy जोड़ना चाहने वाले users के लिए application link उपलब्ध कराया गया है
  • Get a scroll buddy for your website

motion से जुड़ी accessibility सावधानी

  • पेज के side में embedded example में animation और motion शामिल हैं
  • vestibular motion sickness वाले readers को animation देखने से पहले अपने device की reduce motion feature चालू करने की सलाह दी जाती है
  • अगर reduce motion setting चालू है, तो अधिकांश browsers में Scroll Buddy छिप जाना चाहिए

implementation और page structure के संकेत

  • पेज में simple javascript से बनाया गया होने का section title है
  • इसके बाद body का अधिकांश हिस्सा scrolling पैदा करने के लिए lorem ipsum dummy text है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2025-03-04
Hacker News की राय

  • अच्छा है! अभी इसे code में नहीं बनाया, लेकिन मेरे पास पैराशूट वाला हैम्स्टर वाला idea था
    वह page के नीचे की ओर धीरे-धीरे गिरता है, और जब आप तेजी से scroll करते हैं तो पैराशूट खोलकर फिर से viewport के तल पर land करता है; mouse hover करने पर “Top” का sign उठाता है, और click करने पर jetpack से ऊपर उड़ जाता है, फिर screen के सबसे ऊपर पहुँचने पर फिर parachute खोलकर smoothly नीचे आता है

    • अब मुझे यह चाहिए। पता नहीं क्यों, लगता है हैम्स्टर Go भाषा के gopher जैसा दिखेगा, बस नीले रंग का नहीं
    • repository link का इंतजार है। अगर हैम्स्टर बहुत तेजी से scroll करे तो पैराशूट दोबारा न खोल पाए और user “हार” जाए—ऐसा fork मैं add करूंगा
      शायद यह scrolling को control करने में मदद करे?
    • https://gist.github.com/iamtomek/5d4a30c1a6765d695950c777e38...
      disclaimer: मैंने एक भी line खुद नहीं लिखी; Claude 3.7 को Kagi assistant के तौर पर इस्तेमाल करके एक ही conversation में करीब 10 बार revise करवा कर बनाया। prompt में emoji paste करने भर जितना काम मैंने किया
      HTML और JS में कभी कोई meaningful चीज code नहीं की
      edit: यह थोड़ा मजेदार है कि AI की इतनी बात होने वाली जगह पर काम करता हुआ AI-generated code post किया तो पहली प्रतिक्रिया downvote मिली। लगता है लोग हैम्स्टर से ज्यादा AI से नफरत करने वालों को पसंद करते हैं
    • ऊपर scroll करते समय jetpack/rocket hamster दिखे तो अच्छा होगा

  • ऐसे मामलों में अगर user ने prefers-reduced-motion set किया हो तो इसे disable करना सही लगता है
    https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...
    सही समय पर character को hide करने के लिए बस एक CSS rule add करना काफी है:
    @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }

    • लगता है author ने यह implement कर दिया है। अब मेरे जैसे लोग सिर्फ meaningless lorem ipsum page ही देखेंगे
      मेरा मानना है कि demos ऐसे filters से exception हो सकते हैं, खासकर अगर उन तक केवल clear link के जरिए पहुँचा जा सकता हो
      वही code जिसने इसे गायब किया, “यह disabled क्यों है” बताने वाला message भी add कर सकता था। मेरे मामले में वजह Apple Menu > System Preferences > Accessibility > Display > Reduce motion है; बाकी OS के लिए https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref... देखें
      यह setting macOS के छोटे animations हटाकर उसे ज्यादा snappy महसूस कराती है। इस comment के बिना मुझे सालों तक पता नहीं चलता कि इसका असर websites पर भी पड़ता है
    • शायद यही तो exact वजह है कि मैंने “reduce motion” चालू कर रखा है, लेकिन यह implementation काफी harmless है, इसलिए थोड़ा अफसोस है
    • काश site author ने यह comment न देखा होता। यह समझने में काफी देर लगी कि किसी भी browser में यह दिख क्यों नहीं रहा
    • सही पकड़ा। जिन users ने यह setting चालू की है, उनके लिए अब इसे ठीक कर दिया गया होगा

  • किसी ने यह क्यों नहीं कहा कि इसे Stroll Bar कहना चाहिए?

    • दुर्भाग्य से वह नाम पहले से इस्तेमाल में है, इसलिए मैंने scrollbuddy.com खरीद लिया है और जल्द ही लोगों के implement करने लायक setup तैयार करूंगा

  • boring scrollbar के बजाय, scroll करते समय page के side में ऊपर-नीचे चलता हुआ animated stick figure हो तो मजेदार लगेगा
    यह पहला prototype है
    आगे skateboarder, rock climber और squirrel बनाने का सोच रहा हूँ; और कौन-से scroll buddies बनाने चाहिए?

    • दो लोग railcar pump करते हुए
      या scrollbar handle को चप्पू की तरह चलाते लोग; handle जितना लंबा हो, rowers उतने ज्यादा हों
    • कुछ हफ्ते पहले इसका caterpillar version देखा था -> https://x.com/trunarla/status/1893705260142657764
    • बहुत शानदार idea है। एक suggestion: character अपने पीछे breadcrumbs trail गिराता जाए, और ऊपर जाते समय उन्हें फिर से उठा ले या screen से बाहर kick कर दे
    • इसे ‘innovate’ करने के मेरे पहले दो ideas थे: page के नीचे दौड़ती हुई car, या drag racing Christmas tree की तरह lights का ‘full tree’ style countdown
    • raindrops कैसे रहेंगे? बचपन में लंबी car ride के दौरान raindrop race cheer नहीं की है क्या किसी ने?
      Newton के सिर पर गिरता हुआ apple भी अच्छा रहेगा
      सिर्फ सोचने भर से मजा आ रहा है

  • मुझे हैरानी है कि शायद यह पूछने वाला सिर्फ मैं ही हूँ: आखिर implementation method को Google Form के पीछे क्यों छिपाया गया है?
    edit: implementation details असल में DOM से सीधे accessible हैं। जो लोग email नहीं देना चाहते, उनके लिए relevant content निकालकर मैंने gist बना दिया है:
    https://gist.github.com/brysonreece/b15f33cda30af06b7b70788d...

    • समझ नहीं आता। आपने article लिखा और share नहीं करना चाहते, यह तो ठीक; लेकिन उसे देने के बदले email address collect करना बहुत अजीब है
    • अभी की स्थिति में explicit license के बिना code इस्तेमाल नहीं किया जा सकता। posted code में भी license नहीं है, लेकिन author से संपर्क करने पर मिल सकता है
      linked code इस्तेमाल करना copyright infringement हो सकता है
    • वह अपने काम का compensation पैसे में नहीं, attention में लेना चाहता है। काफी reasonable लगता है

  • मैं क्या miss कर रहा हूँ? Firefox और Chrome दोनों में scrollbar के अलावा कुछ नहीं दिख रहा
    क्या यह मेरे set किए हुए custom scrollbar colors की वजह से है?

    • क्या आपने OS में reduce motion चालू कर रखा है? उस setting का सम्मान करते हुए character disabled हो जाता है
    • शायद इसकी वजह यह भी हो सकती है: https://news.ycombinator.com/item?id=43237747
    • Android Firefox और Android Chrome में नहीं दिखता, Windows Chrome में दिखता है
    • मेरे साथ भी वही, कुछ नहीं हो रहा

  • यह 90s के आखिर की याद दिलाता है, जब लोग websites पर snow effect या mouse के पीछे चलने वाली sparks tail जैसे visual effects डालते थे

    • हाँ, DHTML Zone ऐसे dreamy visual effects लेने की typical जगह थी जो user के browser को जाम कर दें—website को बहुत cool दिखाने के लिए
    • अब iOS 18 का iMessage भी याद आ सकता है। अभी upgrade किया और नए emoji व text effects में 2000s vibe महसूस हुई

  • ऐसे projects पसंद हैं क्योंकि ये old internet की याद दिलाते हैं

    • मेरी भी यही reaction थी—ऐसा लगा किसी ने बस मजे और cool चीज के लिए बनाया है
    • और ज्यादा marquee!
    • पुराने HN जैसा!

  • यह Google Form के पीछे क्यों है...? email address collect करने से पहले तो इसका screenshot भी नहीं है कि दिखता कैसा है
    अजीब है कि ऐसी post front page पर आ गई

    • बस page पर बने रहिए। “Get a scroll buddy for your website” link पर click मत कीजिए
    • linked page पर preview दिखता है, लेकिन फिर भी usage method सिर्फ email से मिलना अजीब है
    • ऐसा नहीं है। page खोला तो ठीक से काम कर रहा था
      शायद आपने CSS disable किया है, या scrollbar के पास वाला implementation miss कर दिया। बाकी comments देख लें

  • मजेदार और clever है
    अगर मैं developer होता तो ऐसा version बनाता जिसमें ऊपर scroll करते समय stick figure पीछे की ओर चलते हुए moonwalk करे

    • यह थोड़ा बेवकूफी वाला सवाल हो सकता है, लेकिन developer न होते हुए आप HN पर कैसे आ गए, यह जानने की उत्सुकता है