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

 (focusfurnace.com)
1 पॉइंट द्वारा GN⁺ 2025-03-04 | 1 टिप्पणियां | WhatsApp पर शेयर करें

  • Scroll Buddy का परिचय

    • यह एक प्रोजेक्ट है जिसमें स्क्रॉल बार को मज़ेदार बनाने के लिए एक animated stick figure जोड़ा गया है
    • स्क्रॉल करते समय पेज के किनारे ऊपर-नीचे चलता हुआ stick figure देखा जा सकता है
    • आगे चलकर skateboarder, rock climber, squirrel आदि के अलग-अलग versions की योजना है

  • सावधानियां

    • पेज के किनारे शामिल example animation कुछ पाठकों के लिए समस्या पैदा कर सकता है
    • vestibular movement disorder वाले पाठकों के लिए animation देखने से पहले अपने डिवाइस में reduced motion फीचर सक्रिय करना बेहतर है
    • reduced motion setting चालू होने पर ज़्यादातर browsers में Scroll Buddy छिप जाता है

  • अन्य जानकारी

    • यह प्रोजेक्ट साधारण JavaScript से बनाया गया है
    • स्क्रॉल बार को और दिलचस्प बनाने के लिए ideas आमंत्रित किए जा रहे हैं

  • अन्य सामग्री

    • बाकी टेक्स्ट स्क्रॉल के लिए dummy text है और वास्तविक सामग्री से उसका कोई संबंध नहीं है

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

1 टिप्पणियां

 
GN⁺ 2025-03-04
Hacker News प्रतिक्रियाएँ
  • मज़ेदार है। मेरे पास एक non-coding idea था। मूल रूप से यह पैराशूट लगाए एक hamster है जो पेज के नीचे की ओर धीरे-धीरे गिरता है
    • तेज़ी से scroll करने पर उसका पैराशूट खुल जाता है और वह viewport के निचले हिस्से में फिर से उतरता है
    • mouse hover करने पर वह "Top" का sign पकड़ लेता है, और click करने पर jetpack के साथ ऊपर उड़ जाता है; स्क्रीन के सबसे ऊपर पहुँचने पर फिर से पैराशूट खोलकर स्क्रीन के नीचे नरमी से उतरता है
  • हैरानी है कि किसी ने इसे 'Stroll Bar' क्यों नहीं कहा
  • जब user ने prefers-reduced-motion setting चालू की हो, तो ऐसी functionality को disable कर देना चाहिए
    • इसके लिए अतिरिक्त CSS rule चाहिए
    • @media (prefers-reduced-motion) { #scrollBuddy { visibility: hidden; } }
  • उबाऊ scrollbar की जगह पेज के किनारे ऊपर-नीचे चलती हुई animated stick figure हो तो मज़ेदार लगेगा
    • मैंने पहला prototype बना लिया है
    • अगली बार skateboarder, rock climber, और squirrel बनाने का इरादा है
    • सोच रहा हूँ कि और कौन-से scroll buddy बनाए जा सकते हैं
  • समझ नहीं आता कि implementation को Google Form के पीछे क्यों छिपाया गया है
    • implementation details DOM में आसानी से देखी जा सकती हैं
    • email दिए बिना भी संबंधित details निकाली जा सकें, ऐसा एक gist साझा किया गया है
  • यह Google Form के पीछे क्यों है, समझ नहीं आता। email address इकट्ठा करने से पहले यह कैसा दिखता है, उसका screenshot तक नहीं है। अजीब पोस्ट है जो main page तक पहुँच गई
  • इससे 90 के दशक के आख़िरी वर्षों की याद आती है, जब लोग वेबसाइटों में आँखें या mouse का पीछा करती हुई आग जैसी effects जोड़ते थे
  • समझ नहीं आ रहा कि मैं क्या मिस कर रहा हूँ। Firefox और Chrome में scrollbar के अलावा कुछ भी दिखाई नहीं दे रहा। सोच रहा हूँ कि custom scrollbar color का इससे कुछ लेना-देना है या नहीं
  • ऐसे projects पुराने इंटरनेट की याद दिलाते हैं। पसंद आया
  • यह दिखाता है कि मौजूदा scrollbar कितने बेकार और इस्तेमाल में कठिन हैं
    • पेज में मैं कहाँ था, यह आसानी से दिखाने वाली बात अच्छी लगी। इसमें humor भी है। पसंद आया