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

वेब पर Instagram Stories की तरह अनुभव देने के बारे में खास जानकारी.

Adam Argyle

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

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

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

खास जानकारी

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

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

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

सीएसएस ग्रिड

हमारा लेआउट सीएसएस ग्रिड के लिए किसी तय क्रम में नहीं है, क्योंकि इसमें कुछ कॉन्टेंट को मुश्किल बनाने के बेहतरीन तरीके अपनाए जाते हैं.

दोस्त लेआउट

हमारा मुख्य .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;
}

चलिए, इस 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 स्क्रोल Snap Points की खास बातें, इसे स्क्रॉल करने पर व्यूपोर्ट में तत्वों को लॉक करने के लिए एक इंच. इन सीएसएस प्रॉपर्टी के मौजूद होने से पहले, आपको JavaScript का इस्तेमाल करना पड़ता था, और यह जटिल काम था. चेक आउट करने का समय पेश है सीएसएस स्क्रोल करने पर स्नैप पॉइंट की सुविधा शेयर किया है.

.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 पर टेस्ट किया. यह रहा ये वेब सुविधाओं के बारे में हैं. इनमें हमें सुविधाओं और सहायता में अंतर देखने को मिला.

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

scroll-snap-stop

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

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

• Svelte के साथ @geoffrich_: डेमो और कोड
• Vue के साथ @GauteMeekOlsen: डेमो + कोड
• Lit के साथ @AnaestheticsApp: डेमो और कोड