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

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

Adam Argyle

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

डेमो

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

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

खास जानकारी

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

scrollIntoView({behavior: 'smooth'})

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

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

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

खुद करके

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

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