स्टोरीज़ वाला कॉम्पोनेंट बनाना

वेब पर Instagram Stories जैसा अनुभव देने का बुनियादी तरीका.

Adam Argyle

इस पोस्ट में, हम आपको ऐसा वेब पर Stories बनाने के बारे में बताना चाहते हैं जो काम करे, कीबोर्ड नेविगेशन के साथ काम करे, और सभी ब्राउज़र पर काम करे.

डेमोग्राफ़िक जानकारी

अगर आपको यह जानना है कि स्टोरीज़ वाला यह कॉम्पोनेंट खुद कैसे बनाया जाए, तो स्टोरीज़ के कॉम्पोनेंट कोडलैब पर जाएं.

अगर आप वीडियो पसंद करते हैं, तो यहां इस पोस्ट का YouTube वर्शन दिया गया है:

खास जानकारी

Stories UX के दो लोकप्रिय उदाहरण हैं: Snapchat Stories और Instagram Stories. इनमें, फ़्लीट के बारे में बात नहीं की जाती. UX के लिए बने आम तौर पर इस्तेमाल किए जाने वाले शब्दों में, स्टोरीज़ सिर्फ़ मोबाइल पर इस्तेमाल होने वाली होती हैं. इनका इस्तेमाल, अलग-अलग सदस्यताओं के बारे में जानने के लिए किया जाता है. उदाहरण के लिए, Instagram पर लोग किसी दोस्त की स्टोरी खोलते हैं और उसमें मौजूद तस्वीरें देखते हैं. आम तौर पर वे एक ही समय में कई दोस्तों को ऐसा करते हैं. डिवाइस पर दाईं ओर टैप करने से, उपयोगकर्ता उस दोस्त की अगली स्टोरी पर चला जाता है. दाईं ओर स्वाइप करने से, उपयोगकर्ता स्किप करके दूसरे दोस्त के पास चला जाता है. कहानी का कॉम्पोनेंट, काफ़ी हद तक कैरसेल की तरह होता है. हालांकि, इससे एक डाइमेंशन वाले अरे के बजाय, कई डाइमेंशन वाले अरे पर नेविगेट किया जा सकता है. ऐसा लगता है कि हर कैरसेल के अंदर एक कैरसेल है. 🤯

कार्ड का इस्तेमाल करके, कई डाइमेंशन वाला कलेक्शन दिखाया गया है. बाईं से दाईं ओर, बैंगनी रंग के बॉर्डर कार्ड का स्टैक होता है. साथ ही, हर कार्ड में एक से ज़्यादा हरे-पीले रंग के बॉर्डर वाले कार्ड होते हैं. सूची में मौजूद सूची.
दोस्तों का पहला कैरसेल
दूसरा "स्टैक किया गया" कैरसेल,
👍 एक लिस्ट में लिस्ट किया गया है, जिसे कई डाइमेंशन में देखा जा सकता है

काम के लिए सही टूल चुनना

कुल मिलाकर, मुझे यह कॉम्पोनेंट बनाने में बहुत आसान लगा, जो वेब प्लैटफ़ॉर्म की कुछ अहम सुविधाओं की वजह से मुमकिन हो पाया. आइए, इस बारे में बात करते हैं!

सीएसएस ग्रिड

हमारा लेआउट CSS Grid के लिए कोई बड़ा लेआउट नहीं रहा, क्योंकि इसमें कॉन्टेंट को गलत तरीके से समझाने के कुछ बेहतरीन तरीके मौजूद हैं.

दोस्त का लेआउट

हमारा मुख्य .stories कॉम्पोनेंट रैपर, मोबाइल-फ़र्स्ट हॉरिज़ॉन्टल स्क्रोलव्यू है:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}
ग्रिड से बनाए गए कॉलम को हाइलाइट करने के लिए, Chrome DevTools' डिवाइस मोड का इस्तेमाल करना

आइए, उस grid लेआउट के बारे में बताते हैं:

  • हम मोबाइल पर व्यूपोर्ट को साफ़ तौर पर 100vh और 100vw से भरते हैं और डेस्कटॉप पर साइज़ को सीमित करते हैं
  • /, पंक्ति और कॉलम के टेंप्लेट को अलग करता है
  • auto-flow का मतलब grid-auto-flow: column होता है
  • ऑटोफ़्लो टेंप्लेट 100% है. इस मामले में, यह स्क्रोल विंडो की चौड़ाई के बराबर है

मोबाइल फ़ोन पर, कुछ इस तरह देखें जैसे कि पंक्ति का साइज़, व्यूपोर्ट की ऊंचाई है और हर कॉलम को व्यूपोर्ट की चौड़ाई माना जाता है. Snapchat Stories और Instagram Stories के साथ करते हुए, हर कॉलम किसी दोस्त की स्टोरी होगा. हम चाहते हैं कि दोस्तों की कहानियां व्यूपोर्ट के बाहर जारी रहें, ताकि हमारे पास स्क्रोल करने के लिए कोई जगह हो. ग्रिड, हर दोस्त कहानी के लिए आपके एचटीएमएल के लेआउट के लिए जितने चाहे उतने कॉलम बना देगा. इससे हमारे लिए डाइनैमिक और रिस्पॉन्सिव स्क्रोलिंग कंटेनर बन जाएगा. ग्रिड की मदद से हम पूरे इफ़ेक्ट को एक ही जगह से कंट्रोल कर पा रहे थे.

स्टैकिंग

हर दोस्त के लिए हमें उसकी कहानियों की ज़रूरत होती है, जो पेज पर नंबर डालने के लिए तैयार हो. ऐनिमेशन और दूसरे मज़ेदार पैटर्न की तैयारी के लिए, मैंने एक स्टैक चुना. जब मैं स्टैक बोलता हूं, तो मेरा मतलब है कि आप नीचे की ओर सैंडविच को देख रहे हों, न कि वैसे ही जैसे आप एक तरफ़ से देख रहे हों.

सीएसएस ग्रिड की मदद से, हम सिंगल-सेल ग्रिड यानी स्क्वेयर तय कर सकते हैं, जहां पंक्तियां और कॉलम एक उपनाम ([story]) शेयर करते हैं. इसके बाद, हर चाइल्ड को उस उपनाम वाले सिंगल-सेल स्पेस को असाइन किया जाता है:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

यह हमारे एचटीएमएल को स्टैकिंग ऑर्डर पर कंट्रोल करता है और सभी एलिमेंट का फ़्लो भी बनाए रखता है. ध्यान दें कि हमें absolute की पोज़िशनिंग या z-index की वजह से कुछ भी नहीं करना था और हमें height: 100% या width: 100% के बॉक्स को सही करने की ज़रूरत नहीं पड़ी. पैरंट ग्रिड में, स्टोरी पिक्चर के व्यूपोर्ट का साइज़ पहले ही तय किया जा चुका है. इसलिए, स्टोरी के इन कॉम्पोनेंट में से किसी को भी इसे भरने के लिए कहने की ज़रूरत नहीं है!

सीएसएस के लिए स्क्रोल करने पर स्नैप पॉइंट

CSS Scroll Snap Points की खास जानकारी की मदद से स्क्रोल करने पर एलिमेंट को व्यूपोर्ट में लॉक किया जा सकता है. ये सीएसएस प्रॉपर्टी मौजूद होने से पहले, आपको JavaScript का इस्तेमाल करना पड़ता था. हालांकि, यह काफ़ी मुश्किल था. इन्हें इस्तेमाल करने के बारे में ज़्यादा जानकारी पाने के लिए, सारा द्रासनर की लेख पेश है CSS Scroll Snap Points देखें.

scroll-snap-points स्टाइल के बिना और उसके साथ हॉरिज़ॉन्टल स्क्रोलिंग. इसके बिना, लोग सामान्य रूप से फ़्री स्क्रोल कर सकते हैं. इसके साथ, ब्राउज़र हर आइटम पर धीरे से टिके रहता है.
parent
.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
ओवरस्क्रोल की सुविधा वाला पैरंट, स्नैप के व्यवहार के बारे में बताता है.
बच्चा
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
बच्चे स्नैप टारगेट बनने का विकल्प चुनते हैं.

मैंने Scroll Snap Points को कुछ वजहों से चुना है:

  • मुफ़्त सुलभता. Scroll Snap Points की खास जानकारी में बताया गया है कि लेफ़्ट ऐरो और राइट ऐरो बटन को दबाने से, स्नैप पॉइंट से अगले चरण पर डिफ़ॉल्ट रूप से जाया जा सकता है.
  • बढ़ती हुई खास जानकारी. Scroll Snap Points की खास जानकारी में समय-समय पर नई सुविधाएं और सुधार शामिल किए जा रहे हैं. इसका मतलब है कि स्टोरीज़ वाले मेरे कॉम्पोनेंट को यहां से बेहतर बनाया जा सकेगा.
  • लागू करने में आसानी. स्क्रोल Snap Points को टच के हिसाब से हॉरिज़ॉन्टल तौर पर हॉरिज़ॉन्टल तरीके से पेज पर डाले जाने वाले इस्तेमाल के उदाहरण के लिए बनाया गया है.
  • मुफ़्त प्लैटफ़ॉर्म-स्टाइल इनर्शिया. हर प्लैटफ़ॉर्म स्क्रोल करके अपनी स्टाइल में काम करेगा, न कि सामान्य इनर्शिया, जिसमें स्क्रोल करने और आराम करने की असामान्य स्टाइल हो सकती है.

अलग-अलग ब्राउज़र के साथ काम करने की सुविधा

हमने Opera, Firefox, Safari, और Chrome के साथ-साथ Android और iOS पर टेस्ट किया. यहां वेब सुविधाओं के बारे में कम शब्दों में बताया गया है, जहां हमें क्षमताओं और सहायता में अंतर का पता चला.

हालांकि, हमने कुछ सीएसएस को लागू नहीं किया है, इसलिए कुछ प्लैटफ़ॉर्म को फ़िलहाल UX ऑप्टिमाइज़ेशन में मदद नहीं मिल पा रही है. मुझे इन सुविधाओं को मैनेज करने की ज़रूरत नहीं पड़ी. मुझे भरोसा था कि वे अन्य ब्राउज़र और प्लैटफ़ॉर्म पर पहुंच जाएंगी.

scroll-snap-stop

कैरसेल, UX के इस्तेमाल के उन मुख्य मामलों में से एक हैं जिन्होंने सीएसएस Scroll Snap Points यह सही हो सकता है या कैरसेल को तेज़ी से देखने के लिए बढ़ावा दिया जा सकता है. वहीं दूसरी ओर, स्टोरीज़ को एक-एक करके बेहतर तरीके से नेविगेट किया जाता है और scroll-snap-stop, यही जानकारी देता है.

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

यह पोस्ट लिखते समय, scroll-snap-stop सिर्फ़ Chromium पर आधारित ब्राउज़र पर काम करता है. अपडेट के लिए ब्राउज़र के साथ काम करने की सुविधा देखें. हालांकि, कोई ब्लॉकर नहीं होता. इसका मतलब बस इतना है कि असमर्थित ब्राउज़र पर उपयोगकर्ता गलती से किसी दोस्त को छोड़ सकते हैं. इसलिए, उपयोगकर्ताओं को बस ज़्यादा सावधान रहना होगा या हमें JavaScript का इस्तेमाल करना होगा, ताकि यह पक्का किया जा सके कि किसी छोड़े गए दोस्त को'देखा गया' के तौर पर मार्क न किया गया हो.

अगर आपको इसमें दिलचस्पी है, तो खास जानकारी में ज़्यादा पढ़ें.

overscroll-behavior

क्या आपने कभी मोडल की मदद से पेज को स्क्रोल किया है, जब अचानक आपने मोडल के पीछे मौजूद कॉन्टेंट को स्क्रोल करना शुरू कर दिया हो? overscroll-behavior डेवलपर जाल को स्क्रोल करने देता है और उसे कभी जाने नहीं देता. यह हर तरह के अवसरों के लिए अच्छा है. 'मेरी कहानियां' कॉम्पोनेंट इसका इस्तेमाल करके, कॉम्पोनेंट को छोड़कर आगे बढ़ने और स्क्रोल करने के लिए इस्तेमाल होने वाले हाथ के जेस्चर को रोकता है.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari और Opera ऐसे दो ब्राउज़र थे जिन पर यह काम नहीं करता और यह ठीक है. उन लोगों को पहले की तरह ओवरस्क्रोल करने की सुविधा मिलेगी और हो सकता है कि उन्हें यह बढ़ोतरी कभी दिखे. मैं व्यक्तिगत रूप से इस प्रशंसक का काम करती हूँ. मुझे हर स्क्रोल की सुविधा के साथ इसे शामिल करना पसंद है. इससे उपयोगकर्ता को नुकसान नहीं पहुंचता, जिससे उपयोगकर्ता अनुभव बेहतर होता है.

scrollIntoView({behavior: 'smooth'})

जब कोई उपयोगकर्ता टैप या क्लिक करता है और दोस्त की कहानियों के सेट के आखिर में पहुंच जाता है, तो स्क्रोल स्नैप पॉइंट सेट में अगले दोस्त पर जाने का समय होता है. JavaScript की मदद से, हम अगले दोस्त को रेफ़र कर पाए और उसे स्क्रोल करने का अनुरोध कर पाए. इसकी बुनियादी जानकारी काफ़ी अच्छी है; हर ब्राउज़र ने इसे देखने के लिए इसे स्क्रोल किया है. हालांकि, हर ब्राउज़र ने 'smooth' ऐसा नहीं किया. इसका मतलब है कि इसे स्नैप करने के बजाय, स्क्रोल करके देखा गया है.

element.scrollIntoView({
  behavior: 'smooth'
})

सिर्फ़ Safari ऐसा ब्राउज़र था जो behavior: 'smooth' के साथ काम नहीं करता. अपडेट के लिए ब्राउज़र के साथ काम करने की सुविधा देखें.

गतिविधियां खुद करके

अब आपको पता चल गया है कि मैंने इसे कैसे किया, तो आपको कैसा लगा?! चलिए, अलग-अलग तरह से काम करते हैं और वेब पर बनाने के सभी तरीके सीखते हैं. एक Glitch बनाएं और अपना वर्शन मुझे ट्वीट करें. इसके बाद, मैं उसे नीचे दिए गए कम्यूनिटी रीमिक्स सेक्शन में जोड़ दूँगी.

कम्यूनिटी रीमिक्स