टैब कॉम्पोनेंट बनाना

iOS और Android ऐप्लिकेशन में मिलने वाले टैब कॉम्पोनेंट से मिलते-जुलते टैब कॉम्पोनेंट बनाने के तरीके के बारे में बुनियादी जानकारी.

Adam Argyle

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

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

खास जानकारी

टैब डिज़ाइन सिस्टम का एक सामान्य हिस्सा हैं, लेकिन वे कई आकार और फ़ॉर्म भरें. पहले <frame> एलिमेंट पर डेस्कटॉप टैब बनाए गए थे और अब हमारे पास ये हैं मक्खन वाले मोबाइल कॉम्पोनेंट, जो फ़िज़िक्स की प्रॉपर्टी पर आधारित कॉन्टेंट को ऐनिमेट करते हैं. वे सभी एक ही चीज़ करने का प्रयास कर रहे हैं: जगह बचाना.

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

वेब रणनीति

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

• इनके साथ शानदार स्वाइप और कीबोर्ड इंटरैक्शन के लिए scroll-snap-points स्क्रोल करने के लिए स्टॉप की सही जगह
• यूआरएल हैश के ज़रिए डीप लिंक: इन-पेज स्क्रोल ऐंकरिंग और शेयर करने की सुविधा को मैनेज किया जाने वाला ब्राउज़र
• <a> और id="#hash" एलिमेंट मार्कअप के साथ स्क्रीन रीडर की सुविधा
• क्रॉसफ़ेड ट्रांज़िशन और इंस्टैंट सुविधा चालू करने के लिए prefers-reduced-motion इन-पेज स्क्रोलिंग
• डाइनैमिक रूप से अंडरलाइन करने और @scroll-timeline के लिए इन-ड्राफ़्ट वेब सुविधा चुने गए टैब का रंग बदला जा रहा है

एचटीएमएल

बुनियादी तौर पर, यहां UX यह है: किसी लिंक पर क्लिक करें और यूआरएल को नेस्ट किए गए विषय के बारे में बताने के लिए पेज स्थिति दिखेगी और फिर ब्राउज़र के स्क्रोल करने पर कॉन्टेंट एरिया अपडेट मेल खाने वाला एलिमेंट.

स्ट्रक्चर से जुड़े कुछ कॉन्टेंट में ये सदस्य शामिल होते हैं: लिंक और :target. बुध लिंक की सूची चाहिए, जिसमें <nav> सबसे बेहतर है और <article> की सूची एलिमेंट शामिल हैं, जिनके लिए <section> बेहतरीन है. हर लिंक हैश किसी सेक्शन से मैच होगा, जिससे ब्राउज़र ऐंकरिंग के ज़रिए चीज़ें स्क्रोल कर सकता है.

उदाहरण के लिए, किसी लिंक पर क्लिक करने से, :target लेख अपने-आप उस लिंक पर चला जाता है Chrome 89, किसी JS की ज़रूरत नहीं है. इसके बाद, उपयोगकर्ता लेख के कॉन्टेंट को हमेशा की तरह अपने इनपुट डिवाइस को ट्रैक कर सकेंगे. यह बिना शुल्क का कॉन्टेंट है, जैसा कि इस्तेमाल किया जा सकता है.

मैंने टैब व्यवस्थित करने के लिए, नीचे दिए गए मार्कअप का इस्तेमाल किया है:

<snap-tabs>
  <header>
    <nav>
      <a></a>
      <a></a>
      <a></a>
      <a></a>
    </nav>
  </header>
  <section>
    <article></article>
    <article></article>
    <article></article>
    <article></article>
  </section>
</snap-tabs>

मैं इनका इस्तेमाल करके, <a> और <article> एलिमेंट के बीच कनेक्शन बना सकती हूं href और id प्रॉपर्टी:

<snap-tabs>
  <header>
    <nav>
      <a href="#responsive"></a>
      <a href="#accessible"></a>
      <a href="#overscroll"></a>
      <a href="#more"></a>
    </nav>
  </header>
  <section>
    <article id="responsive"></article>
    <article id="accessible"></article>
    <article id="overscroll"></article>
    <article id="more"></article>
  </section>
</snap-tabs>

अगले लेख में, मैंने अलग-अलग लेखों में कई और टाइटल का मिला-जुला रूप. कॉन्टेंट के साथ काम करने के साथ ही, हम लेआउट.

स्क्रोल करने वाले लेआउट

इस कॉम्पोनेंट में स्क्रोल एरिया तीन तरह के होते हैं:

• नेविगेशन (गुलाबी) हॉरिज़ॉन्टल है इसे स्क्राेल किया जा सकता है
• कॉन्टेंट एरिया (नीला) हॉरिज़ॉन्टल है इसे स्क्राेल किया जा सकता है
• लेख का हर आइटम (हरे रंग में) वर्टिकल है जिसे स्क्रोल किया जा सकता है.

स्क्रोल करने में दो अलग-अलग तरह के एलिमेंट शामिल होते हैं:

1. विंडो
   तय किए गए डाइमेंशन वाला बॉक्स, जिसमें overflow होता है प्रॉपर्टी स्टाइल.
2. बड़े साइज़ का सरफ़ेस
   इस लेआउट में, सूची के कंटेनर हैं: nav लिंक, सेक्शन आर्टिकल, और लेख का कॉन्टेंट.

<snap-tabs> लेआउट

मैंने सबसे ऊपर के लेवल का लेआउट फ़्लेक्स (Flexbox) चुना. मैंने यह दिशा सेट की है column की मदद से, हेडर और सेक्शन वर्टिकल तौर पर क्रम में होते हैं. यह हमारा पहला विंडो को स्क्रोल करें, और यह उन सभी चीज़ों को छिपा देता है जिनमें ओवरफ़्लो छिपाया गया है. हेडर और सेक्शन में जल्द ही, अलग-अलग ज़ोन के तौर पर ओवरस्क्रोल का इस्तेमाल होगा.

<snap-tabs>
  <header></header>
  <section></section>
</snap-tabs>

  snap-tabs {
  display: flex;
  flex-direction: column;

  /* establish primary containing box */
  overflow: hidden;
  position: relative;

  & > section {
    /* be pushy about consuming all space */
    block-size: 100%;
  }

  & > header {
    /* defend against 
 needing 100% */
    flex-shrink: 0;
    /* fixes cross browser quarks */
    min-block-size: fit-content;
  }
}

रंग-बिरंगे 3-स्क्रोल डायग्राम की तरफ़ इशारा करते हुए:

• <header> अब (गुलाबी) बनने के लिए तैयार है स्क्रोल कंटेनर.
• <section> (नीला) स्क्रोल होने के लिए तैयार है कंटेनर.

जिन फ़्रेम को मैंने नीचे हाइलाइट किया है VisBug की मदद से हमें विंडो बनाए गए हैं.

टैब <header> का लेआउट

अगला लेआउट करीब-करीब वैसा ही है: मैं वर्टिकल क्रम बनाने के लिए फ़्लेक्स का इस्तेमाल करता/करती हूं.

<snap-tabs>
  <header>
    <nav></nav>
    <span class="snap-indicator"></span>
  </header>
  <section></section>
</snap-tabs>

header {
  display: flex;
  flex-direction: column;
}

.snap-indicator को लिंक के ग्रुप के साथ हॉरिज़ॉन्टल ट्रैवल करना चाहिए और यह हेडर लेआउट वह चरण सेट करने में मदद करता है. यहां कोई निरपेक्ष स्थिति वाला एलिमेंट नहीं है!

अगला, स्क्रोल स्टाइल के बारे में है. ऐसा करने से पता चलता है कि हम स्क्रोल की स्टाइल शेयर कर सकते हैं दो हॉरिज़ॉन्टल स्क्रोल एरिया (हेडर और सेक्शन) के बीच में था, इसलिए मैंने एक क्लास, .scroll-snap-x.

.scroll-snap-x {
  /* browser decide if x is ok to scroll and show bars on, y hidden */
  overflow: auto hidden;
  /* prevent scroll chaining on x scroll */
  overscroll-behavior-x: contain;
  /* scrolling should snap children on x */
  scroll-snap-type: x mandatory;

  @media (hover: none) {
    scrollbar-width: none;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
}

हर यूनिट के लिए x ऐक्सिस पर ओवरफ़्लो होना, ट्रैप ओवरस्क्रोल के लिए स्क्रोल कंटेनमेंट, छिपा हुआ टच डिवाइस के लिए स्क्रोलबार और कॉन्टेंट को लॉक करने के लिए आखिर में स्क्रोल-स्नैप प्रज़ेंटेशन एरिया. हमारे कीबोर्ड टैब का क्रम ऐक्सेस किया जा सकता है. साथ ही, इसमें इंटरैक्शन से जुड़ी किसी भी गाइड का इस्तेमाल किया जा सकता है स्वाभाविक रूप से फ़ोकस करें. स्क्रोल स्नैप कंटेनर भी एक बढ़िया कैरसेल स्टाइल के साथ आते हैं से इंटरैक्शन कर सकते हैं.

टैब हेडर <nav> का लेआउट

नेविगेशन के लिंक, वर्टिकल लाइन में और बिना किसी लाइन ब्रेक के, लाइन में लगाए जाने चाहिए बीच में रखा जाता है और हर लिंक आइटम को स्क्रोल-स्नैप कंटेनर में स्नैप करना चाहिए. Swift हम 2021 की सीएसएस के लिए काम करेंगे!

<nav>
  <a></a>
  <a></a>
  <a></a>
  <a></a>
</nav>

  nav {
  display: flex;

  & a {
    scroll-snap-align: start;

    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
}

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

टैब <section> का लेआउट

यह सेक्शन आसानी से इस्तेमाल किया जा सकने वाला आइटम है. इसे स्पेस का सबसे ज़्यादा इस्तेमाल करने वाले उपभोक्ता के तौर पर शामिल किया जाना चाहिए. यह लेखों को रखने के लिए, कॉलम भी बनाने होंगे. फिर से, तेज़ी से यह सीएसएस 2021 के लिए कैसे काम करता है! block-size: 100%, इस एलिमेंट को फिर अपने लेआउट के लिए एक सीरीज़ बनाता है, कॉलम की चौड़ाई 100% है. प्रतिशत यहां अच्छी तरह से काम करते हैं क्योंकि हमने माता-पिता पर सख्त पाबंदियां लगाई हैं.

<section>
  <article></article>
  <article></article>
  <article></article>
  <article></article>
</section>

  section {
  block-size: 100%;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
}

यह ऐसा लगता है जैसे हम यह कह रहे हों कि "उम्मीद के मुताबिक, तेज़ी से लंबाई करते हुए बड़ा करो" (याद रखें कि हमने flex-shrink: 0 पर जो हेडर सेट किया है: यह इससे बचाव के लिए है एक्सपैंशन पुश), जिससे पूरी ऊंचाई वाले कॉलम के सेट के लिए लाइन की ऊंचाई सेट हो जाती है. कॉन्टेंट बनाने auto-flow स्टाइल, ग्रिड को बच्चों को हमेशा हॉरिज़ॉन्टल फ़ॉर्मैट में रखने का सुझाव देती है लाइन, कोई रैपिंग नहीं, और जो हमें चाहिए; पैरंट विंडो से बाहर निकलने के लिए.

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

टैब <article> का लेआउट

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

<article>
  <h2></h2>
  <p></p>
  <p></p>
  <h2></h2>
  <p></p>
  <p></p>
  ...
</article>

article {
  scroll-snap-align: start;

  overflow-y: auto;
  overscroll-behavior-y: contain;
}

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

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

स्क्रोल वाले तीन हिस्सों का रीकैप

मैंने नीचे अपने सिस्टम की सेटिंग में, "स्क्रोलबार हमेशा दिखाएं" को चुना है. मुझे लगता है इस सेटिंग के चालू रहने पर, लेआउट का काम करना दोगुना ज़रूरी है, क्योंकि यह मेरे लिए लेआउट और स्क्रोल ऑर्कस्ट्रेशन की समीक्षा करनी होगी.

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

DevTools हमें इसे समझने में मदद कर सकता है:

स्क्रोल के लेआउट पूरे हो गए हैं: स्नैप करना, डीप लिंक किया जा सकता है, और कीबोर्ड इस्तेमाल किया जा सकता है सुलभ है. उपयोगकर्ता अनुभव को बेहतर बनाने, स्टाइल, और खुशी के लिए मज़बूत आधार.

सुविधा से जुड़ी खास बातें

स्क्रोल स्नैप किए गए बच्चे, साइज़ बदलने के दौरान अपनी लॉक की गई पोज़िशन बनाए रखते हैं. इसका मतलब है डिवाइस को घुमाने या ब्राउज़र पर देखने पर JavaScript को कुछ भी दिखाने की ज़रूरत नहीं होगी आकार बदलें. इसे Chromium DevTools डिवाइस में आज़माएं मोड: रिस्पॉन्सिव के अलावा कोई भी मोड चुनना और फिर डिवाइस फ़्रेम का साइज़ बदलना. ध्यान दें कि एलिमेंट, कॉन्टेंट के साथ दिखता रहता है और लॉक रहता है. यह रहा क्योंकि Chromium ने इन निर्देशों की शर्तों को पूरा करने के लिए, लागू करने की प्रक्रिया को अपडेट किया है. यह रहा इस बारे में एक ब्लॉग पोस्ट.

ऐनिमेशन

इस ऐनिमेशन का काम, यूज़र इंटरफ़ेस (यूआई) के साथ इंटरैक्शन को साफ़ तौर पर लिंक करना है सुझाव/राय दें या शिकायत करें. इससे उपयोगकर्ता को उनकी (उम्मीद है कि) गाइड करने या मदद करने में मदद मिलेगी खोज के लिए इस्तेमाल किया जा सकता है. मैं इस मकसद से मोशन जोड़ूँगा और शर्त के साथ. उपयोगकर्ता अब अपनी गतिविधि की जानकारी दे सकते हैं उनकी पसंद के मुताबिक और मुझे अपने इंटरफ़ेस में उनकी प्राथमिकताओं का जवाब देने में बहुत आनंद आता है.

मैं लेख को स्क्रोल करने की जगह के साथ एक अंडरलाइन टैब जोड़ रहा हूँ. स्नैपिंग नहीं है यह ऐनिमेशन के साथ काम करने का सबसे अच्छा तरीका है. यह <nav> को बनाए रखता है, जो mini-map, कॉन्टेंट से कनेक्ट किया गया. हम सीएसएस और JS दोनों से उपयोगकर्ता की मोशन प्राथमिकता की जांच करेंगे. कई कुछ ऐसी बेहतरीन जगहें जिन्हें आपको ध्यान में रखना चाहिए!

स्क्रोल करने की कार्रवाई

:target और, दोनों के मोशन व्यवहार को बेहतर बनाया जा सकता है element.scrollIntoView(). डिफ़ॉल्ट रूप से, यह तुरंत डाउनलोड हो जाता है. ब्राउज़र बस पेज पर स्क्रोल करें. अगर हम स्क्रोल की उस जगह पर जाना चाहें, तो की तरह ब्लिंक करेगा?

@media (prefers-reduced-motion: no-preference) {
  .scroll-snap-x {
    scroll-behavior: smooth;
  }
}

हम यहां मोशन फ़ीचर दिखा रहे हैं. साथ ही, यह ऐसा मोशन भी है जिसे उपयोगकर्ता कंट्रोल नहीं कर सकते (जैसे कि स्क्रोलिंग), हम यह स्टाइल सिर्फ़ तब लागू करते हैं, जब उपयोगकर्ता ने कम मोशन पर काम करता है. इस तरह से, हम सिर्फ़ स्क्रोल की सेटिंग लागू करते हैं मोशन वाली इमेज चुनें.

टैब इंडिकेटर

इस ऐनिमेशन का मकसद, इंडिकेटर को स्थिति से जोड़ने में मदद करना है कॉन्टेंट को हटा दिया जाता है. मैंने उपयोगकर्ताओं के लिए, border-bottom स्टाइल को क्रॉसफ़ेड करने का फ़ैसला लिया है जिन्हें कम मोशन पसंद है. साथ ही, स्क्रोल करके लिंक की गई स्लाइडिंग + कलर फ़ेड ऐनिमेशन के लिए सही माना जाता है.

Chromium Devtools में, प्राथमिकता को टॉगल किया जा सकता है और अलग-अलग ट्रांज़िशन स्टाइल लागू करें. मुझे इसे तैयार करने में बहुत मज़ा आया.

@media (prefers-reduced-motion: reduce) {
  snap-tabs > header a {
    border-block-end: var(--indicator-size) solid hsl(var(--accent) / 0%);
    transition: color .7s ease, border-color .5s ease;

    &:is(:target,:active,[active]) {
      color: var(--text-active-color);
      border-block-end-color: hsl(var(--accent));
    }
  }

  snap-tabs .snap-indicator {
    visibility: hidden;
  }
}

जब उपयोगकर्ता कम मोशन को पसंद करता है, तो मैं .snap-indicator छिपा देता हूं, क्योंकि मैं नहीं करता अब इसकी ज़रूरत नहीं है. इसके बाद, मैं इसे border-block-end स्टाइल से बदल देता हूं और transition. टैब इंटरैक्शन में यह भी देखें कि सक्रिय नेविगेशन आइटम इसमें सिर्फ़ ब्रैंड की अंडरलाइन हाइलाइट की गई है. हालांकि, टेक्स्ट का रंग भी गहरा है. कॉन्टेंट बनाने ऐक्टिव एलिमेंट में टेक्स्ट का कंट्रास्ट ज़्यादा है. साथ ही, उसमें चमकीला अंडरलाइट एक्सेंट ज़्यादा है.

सीएसएस की कुछ अतिरिक्त लाइनें, लोगों को दिखने में मदद करेंगी. ऐसा इसलिए, क्योंकि हम बहुत सोच-समझकर मोशन की सुविधा का ध्यान रखते हैं). हालाँकि, मुझे यह पसंद है।

@scroll-timeline

ऊपर दिए गए सेक्शन में मैंने आपको दिखाया था कि मैं कम मोशन वाले क्रॉसफ़ेड को कैसे मैनेज करता/करती हूं शैली और इस सेक्शन में मैं आपको दिखाऊंगा कि मैंने इंडिकेटर और क्षेत्र को एक साथ स्क्रॉल करें. यह रहा आगे कुछ मज़ेदार एक्सपेरिमेंट. उम्मीद है कि आप मेरी तरह ही उत्साहित हूं.

const { matches:motionOK } = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
);

सबसे पहले मैं उपयोगकर्ता की गति पसंद की जाँच JavaScript से करता हूँ. अगर यह false है, इसका मतलब है कि उपयोगकर्ता, कम मोशन वाले वीडियो को प्राथमिकता देगा. इसके बाद, हम कोई भी विज्ञापन नहीं चलाएंगे के मोशन इफ़ेक्ट शामिल हैं.

if (motionOK) {
  // motion based animation code
}

यह लिखते समय, के लिए ब्राउज़र समर्थन @scroll-timeline कोई नहीं है. यह है ड्राफ़्ट की खास जानकारी में सिर्फ़ वे बदलाव शामिल हो सकते हैं एक्सपेरिमेंट के तौर पर उपलब्ध कराना. हालांकि, इसमें पॉलीफ़िल है, जिसका इस्तेमाल मैं इसमें करता/करती हूं डेमो.

ScrollTimeline

सीएसएस और JavaScript, दोनों ही स्क्रोल टाइमलाइन बना सकते हैं. हालांकि, मैंने इसके लिए ऑप्ट इन किया है JavaScript की सुविधा जोड़ी है, ताकि मैं ऐनिमेशन में लाइव एलिमेंट मेज़रमेंट का इस्तेमाल कर सकूं.

const sectionScrollTimeline = new ScrollTimeline({
  scrollSource: tabsection,  // snap-tabs > section
  orientation: 'inline',     // scroll in the direction letters flow
  fill: 'both',              // bi-directional linking
});

मैं चाहता/चाहती हूँ कि 1 चीज़ किसी अन्य व्यक्ति की स्क्रोल स्थिति का अनुसरण करे और ScrollTimeline मैं स्क्रोल लिंक के ड्राइवर, scrollSource तय करता/करती हूं. आम तौर पर, वेब पर एक ऐनिमेशन ग्लोबल टाइम फ़्रेम टिक के हिसाब से चलता है, लेकिन मेमोरी में सेव किया गया कस्टम sectionScrollTimeline, मैं उन सभी को बदल सकती हूं.

tabindicator.animate({
    transform: ...,
    width: ...,
  }, {
    duration: 1000,
    fill: 'both',
    timeline: sectionScrollTimeline,
  }
);

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

डाइनैमिक कीफ़्रेम

ऐनिमेट करने के लिए, यह साफ़ तौर पर जानकारी देने वाला एक बेहतरीन सीएसएस तरीका है @scroll-timeline, लेकिन मैंने जो ऐनिमेशन चुना वह बहुत डाइनैमिक था. कोई नहीं auto की चौड़ाई के बीच ट्रांज़िशन का तरीका है. साथ ही, डाइनैमिक तौर पर बनाने का कोई तरीका नहीं है कई कीफ़्रेम बनाए जा सकते हैं.

हालांकि, JavaScript को यह जानकारी है कि वह जानकारी कैसे पाई जा सकती है. इसलिए, हम इस जानकारी को बार-बार और रनटाइम के दौरान कंप्यूट की गई वैल्यू हासिल कर लेता है:

tabindicator.animate({
    transform: [...tabnavitems].map(({offsetLeft}) =>
      `translateX(${offsetLeft}px)`),
    width: [...tabnavitems].map(({offsetWidth}) =>
      `${offsetWidth}px`)
  }, {
    duration: 1000,
    fill: 'both',
    timeline: sectionScrollTimeline,
  }
);

हर tabnavitem के लिए, offsetLeft पोज़िशन को डिस्ट्रक्चर करें और एक स्ट्रिंग दें जो इसे translateX वैल्यू के तौर पर इस्तेमाल करता है. यह ऐनिमेशन. चौड़ाई के लिए भी यही किया जाता है. हर एक से पूछा जाता है कि उसकी डाइनैमिक चौड़ाई क्या है और फिर उसका इस्तेमाल मुख्य-फ़्रेम वैल्यू के तौर पर किया जाता है.

यहां मेरे फ़ॉन्ट और ब्राउज़र प्राथमिकताओं के आधार पर आउटपुट का उदाहरण दिया गया है:

TranslateX मुख्य-फ़्रेम:

[...tabnavitems].map(({offsetLeft}) =>
  `translateX(${offsetLeft}px)`)

// results in 4 array items, which represent 4 keyframe states
// ["translateX(0px)", "translateX(121px)", "translateX(238px)", "translateX(464px)"]

चौड़ाई वाले मुख्य-फ़्रेम:

[...tabnavitems].map(({offsetWidth}) =>
  `${offsetWidth}px`)

// results in 4 array items, which represent 4 keyframe states
// ["121px", "117px", "226px", "67px"]

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

उपयोगकर्ता इन चीज़ों को देखते हुए ऐनिमेशन का इस्तेमाल करता है, जैसे कि स्क्रीन की चौड़ाई और इंडिकेटर की स्थिति एक सेक्शन से दूसरे सेक्शन में बदल जाती है. ट्रैकिंग शानदार तरीके से स्क्रोल करें.

शायद आपने ध्यान नहीं दिया होगा, लेकिन मुझे अपने YouTube चैनल पर हाइलाइट किया गया नेविगेशन आइटम चुना जाता है.

रंग को हाइलाइट करने पर, चुने हुए हल्के स्लेटी रंग को और भी पीछे ले जाया जाता है आइटम में ज़्यादा कंट्रास्ट है. टेक्स्ट के लिए रंग बदलना आम बात है, जैसे कि कर्सर घुमाने पर उसे चुना जाता है, लेकिन उसे स्क्रोल करने पर रंग में बदलाव करना अगले लेवल का है, अंडरलाइन इंडिकेटर के साथ सिंक हो जाता है.

मैंने इसे इस तरह से किया:

tabnavitems.forEach(navitem => {
  navitem.animate({
      color: [...tabnavitems].map(item =>
        item === navitem
          ? `var(--text-active-color)`
          : `var(--text-color)`)
    }, {
      duration: 1000,
      fill: 'both',
      timeline: sectionScrollTimeline,
    }
  );
});

हर टैब नेविगेशन लिंक को इस नए रंग ऐनिमेशन की ज़रूरत है, ताकि वही स्क्रोल किया जा सके टाइमलाइन को अंडरलाइन इंडिकेटर के तौर पर दिखाता है. मैं पहले की तरह ही इस टाइमलाइन का इस्तेमाल करता/करती हूं: का इस्तेमाल करके स्क्रोल पर एक टिक लगाया जा सकता है. ऐनिमेशन भी चाहिए. जैसा कि मैंने पहले किया था, मैंने लूप में 4 कीफ़्रेम बनाए और रंग.

[...tabnavitems].map(item =>
  item === navitem
    ? `var(--text-active-color)`
    : `var(--text-color)`)

// results in 4 array items, which represent 4 keyframe states
// [
  "var(--text-active-color)",
  "var(--text-color)",
  "var(--text-color)",
  "var(--text-color)",
]

var(--text-active-color) रंग वाला कीफ़्रेम लिंक को हाइलाइट करता है और नहीं तो यह एक स्टैंडर्ड टेक्स्ट रंग होता है. वहां मौजूद नेस्ट किया गया लूप इसे अन्य सीधे तौर पर, क्योंकि आउटर लूप हर नेविगेशन आइटम होता है और इनर लूप हर नेविगेशन आइटम होता है navitem के निजी मुख्य-फ़्रेम पर. मैं जांच करता/करती हूं कि आउटर लूप एलिमेंट समान है या नहीं एक आंतरिक लूप बनाएं, और उसका इस्तेमाल करके उसके चुने गए हिस्से का पता लगाएं.

मुझे यह लिखने में बहुत मज़ा आया. बहुत कुछ.

JavaScript को बेहतर बनाने के और भी टूल

हम आपको याद दिलाना चाहते हैं कि यहां दिखाए गए कॉन्टेंट का मुख्य मकसद बिना किसी रुकावट के काम करना है JavaScript. आइए देखते हैं कि JS की मदद से, हम उसे बेहतर कैसे बना सकते हैं उपलब्ध हैं.

डीप लिंक

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

window.onload = () => {
  if (location.hash) {
    tabsection.scrollLeft = document
      .querySelector(location.hash)
      .offsetLeft;
  }
}

स्क्रॉल समाप्ति समन्वयन

हमारे उपयोगकर्ता हमेशा क्लिक नहीं करते या कीबोर्ड का उपयोग नहीं करते, कभी-कभी वे बिना किसी शुल्क के स्क्रोल किया जा सकता है. सेक्शन स्क्रोलर बंद होने पर स्क्रोल करना होता है, जहां भी यह ऊपर वाले नेविगेशन बार में दिख सकता है.

स्क्रोल खत्म होने का इंतज़ार करने का तरीका यहां दिया गया है: js tabsection.addEventListener('scroll', () => { clearTimeout(tabsection.scrollEndTimer); tabsection.scrollEndTimer = setTimeout(determineActiveTabSection, 100); }); अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

const determineActiveTabSection = () => {
  const i = tabsection.scrollLeft / tabsection.clientWidth;
  const matchingNavItem = tabnavitems[i];

  matchingNavItem && setActiveTab(matchingNavItem);
};

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

const setActiveTab = tabbtn => {
  tabnav
    .querySelector(':scope a[active]')
    .removeAttribute('active');

  tabbtn.setAttribute('active', '');
  tabbtn.scrollIntoView();
};

सक्रिय टैब को सेट करने से पहले किसी वर्तमान सक्रिय टैब को हटाएं, और फिर आने वाला नेविगेशन आइटम ऐक्टिव स्टेट एट्रिब्यूट. scrollIntoView() को किया गया कॉल का सीएसएस के साथ मज़ेदार इंटरैक्शन होता है.

.scroll-snap-x {
  overflow: auto hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;

  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

हॉरिज़ॉन्टल स्क्रोल स्नैप यूटिलिटी सीएसएस में, हमने लागू होने वाली मीडिया क्वेरी को नेस्ट किया smooth अगर उपयोगकर्ता गति सहन कर सकता है, तो स्क्रोल करना. JavaScript आपके विज्ञापनों को एलिमेंट को स्क्रोल करने की सुविधा देता है. साथ ही, सीएसएस, UX को साफ़ तौर पर मैनेज कर सकती है. यह कभी-कभी यह छोटा सा मैच तैयार करता है.

नतीजा

अब जब आपको पता है कि मैंने इसे कैसे किया, तो कैसे करेंगे?! यह थोड़ा मज़ेदार है कॉम्पोनेंट आर्किटेक्चर! गेम में स्लॉट के साथ पहला वर्शन कौन बनाने वाला है पसंदीदा फ़्रेमवर्क? 🙂

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

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

• वेब कॉम्पोनेंट के साथ @devnook, @rob_dodson, और @DasSurma: लेख.
• @jhvanderschee पर इन बटन के साथ: कोडपेन.