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

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

Adam Argyle

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

डेमो

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

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

खास जानकारी

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

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

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

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

सीएसएस ग्रिड

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

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

हमारा मुख्य .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 प्रॉपर्टी के मौजूद होने से पहले, आपको JavaScript का इस्तेमाल करना पड़ता था. यह काफ़ी मुश्किल था. इनका इस्तेमाल करने के बारे में बेहतर तरीके से जानने के लिए, Sarah Drasner की Introducing CSS Scroll Snap Points लेख पढ़ें.

scroll-snap-points स्टाइल के साथ और बिना हॉरिज़ॉन्टल स्क्रोलिंग. इसके बिना, उपयोगकर्ता सामान्य तौर पर फ़्री स्क्रोल कर सकते हैं. इसकी मदद से, ब्राउज़र हर आइटम पर धीरे से रुकता है.
अभिभावक
.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;
}
 बच्चे, स्नैप के टारगेट के तौर पर ऑप्ट इन करते हैं.

मैंने स्क्रोल स्नैप पॉइंट को इन वजहों से चुना है:

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

अलग-अलग ब्राउज़र के साथ काम करना

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

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

scroll-snap-stop

कैरसेल, उपयोगकर्ता अनुभव के लिए इस्तेमाल किए गए अहम उदाहरणों में से एक था, जिसकी वजह से सीएसएस स्क्रोलिंग स्नैप पॉइंट की खास जानकारी बनाई गई. स्टोरीज़ की तरह, हर इमेज के साथ इंटरैक्ट करने के बाद, कैरसेल को हमेशा रुकना ज़रूरी नहीं है. यह सही हो सकता है या इसे तेज़ी से कैरसेल पर साइकल चलाने के लिए बढ़ावा दिया जा सकता है. वहीं दूसरी ओर, स्टोरीज़ को एक-एक करके नेविगेट करना सबसे अच्छा होता है. यही सुविधा 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 ऐसे दो ब्राउज़र थे जो यह काम नहीं करते थे और यह बिलकुल ठीक है. इन उपयोगकर्ताओं को ओवरस्क्रोल का अनुभव मिलेगा जैसा कि वे पहले इस्तेमाल करते थे. हो सकता है कि उन्होंने इस सुधार पर कभी ध्यान न दिया हो. मैं व्यक्तिगत तौर पर इस सुविधा का बहुत बड़ा प्रशंसक हूं. साथ ही, इसे हर उस ओवरस्क्रोल सुविधा में शामिल करना पसंद करता हूं जिसे लागू किया जाता है. यह एक नुकसानदायक चीज़ है, जिससे UX को सिर्फ़ बेहतर बनाया जा सकता है.

scrollIntoView({behavior: 'smooth'})

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

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

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

खुद करके

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

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