सीएसएस डीप-डाइव - फ़्रेम-परफ़ेक्ट कस्टम स्क्रोलबार के लिए matrix3d()

सुरमा

Twitter GitHub Glitch होम पेज

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

बहुत ज़्यादा शब्द हैं, पढ़ा नहीं गया

आपको छोटी-छोटी चीज़ों की परवाह नहीं है? क्या आप बस Nyan cat डेमो देखना चाहते हैं और लाइब्रेरी पाना चाहते हैं? डेमो का कोड हमारे GitHub रेपो में मिल सकता है.

LAM;WRA (लंबा और गणितीय; फिर भी पढ़ेंगे)

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

कुछ समय पहले, हमने एक पैरालैक्स स्क्रोलर बनाया था (क्या आपने वह लेख पढ़ा था? यह वाकई अच्छा है, आपका समय कीमती है!). सीएसएस 3D ट्रांसफ़ॉर्म का इस्तेमाल करके एलिमेंट को वापस पुश करने से, एलिमेंट को स्क्रोल करने की हमारी असल स्पीड से धीमी हो गई.

ज़रूरी बातों पर फिर से एक नज़र

चलिए, हम आपको इस बात की जानकारी देते हैं कि पैरालैक्स स्क्रोलर कैसे काम करता है.

जैसा कि ऐनिमेशन में दिखाया गया है, हमने 3D स्पेस में एलिमेंट को “पीछे की ओर” धकेलकर Z ऐक्सिस पर पैरलेक्स इफ़ेक्ट हासिल किया. किसी दस्तावेज़ को स्क्रोल करना असल में Y ऐक्सिस पर एक अनुवाद होता है. इसलिए, अगर हम डाउन x 100 पिक्सल तक स्क्रोल करते हैं, तो हर एलिमेंट का अनुवाद ऊपर x 100 पिक्सल तक हो जाएगा. यह सभी एलिमेंट पर लागू होता है, यहां तक कि उन चीज़ों पर भी जो “आगे पीछे” वाले हैं. लेकिन क्योंकि वे कैमरे से दूर हैं, इसलिए स्क्रीन पर उनकी निगरानी की गई मूवमेंट 100 पिक्सल से कम होगी, जिससे मनचाहा पैरालैक्स इफ़ेक्ट मिलेगा.

बेशक, किसी एलिमेंट को वापस स्पेस में ले जाने पर वह छोटा भी दिखेगा. इसे हम एलिमेंट का बैक अप स्केल करके ठीक करते हैं. हमने पैरलेक्स स्क्रोलर बनाते समय सही गणित का पता लगाया इसलिए, मैं पूरी जानकारी को नहीं दोहराऊँगा.

पहला चरण: हमें क्या करना है?

स्क्रोलबार. हम इसे बनाने जा रहे हैं. हालांकि, क्या आपने कभी सोचा है कि वे क्या काम करते हैं? मैंने नहीं किया. स्क्रोलबार से पता चलता है कि फ़िलहाल उपलब्ध कॉन्टेंट में से कितनी जानकारी दिख रही है और पाठक के तौर पर आपने कितनी प्रोग्रेस की है. नीचे की ओर स्क्रोल करने पर, स्क्रोलबार भी यह दिखाता है कि गेम खत्म होने वाला है. अगर पूरा कॉन्टेंट व्यूपोर्ट में फ़िट हो जाता है, तो आम तौर पर स्क्रोलबार छिप जाता है. अगर कॉन्टेंट की ऊंचाई व्यूपोर्ट से दोगुनी है, तो स्क्रोलबार, व्यूपोर्ट की ऊंचाई का आधा हिस्सा अपने-आप भर देता है. व्यूपोर्ट की ऊंचाई का तीन गुना कॉन्टेंट, स्क्रोलबार को व्यूपोर्ट वगैरह के 1⁄3 तक मापता है. आपको पैटर्न दिखाई देता है. स्क्रोल करने के बजाय, स्क्रोलबार पर क्लिक करके उसे खींचा और छोड़ा जा सकता है. इससे, साइट पर तेज़ी से आगे बढ़ा जा सकता है. इस तरह की समझ से न दिखाई जाने वाली चीज़ों के लिए, यह हैरतअंगेज़ तरीके से होता है. चलिए, एक बार में एक ही लड़ाई लड़ते हैं.

चरण 1: इसे उलटे क्रम में लगाना

ठीक है, जैसा कि पैरालैक्स स्क्रोलिंग लेख में बताया गया है, हम सीएसएस 3D ट्रांसफ़ॉर्म के ज़रिए एलिमेंट को स्क्रोल करने की रफ़्तार से धीमा बना सकते हैं. क्या हम दिशा बदल भी सकते हैं? इससे पता चलता है कि हम ऐसा कर सकते हैं और इस तरह से एक फ़्रेम-परफ़ेक्ट, कस्टम स्क्रोलबार बनाया जा सकता है. इसके काम करने के तरीके को समझने के लिए, हमें पहले सीएसएस 3D की कुछ बुनियादी बातों को कवर करना होगा.

गणित के हिसाब से किसी भी तरह का ऐंगल दिखाने के लिए, एक जैसे निर्देशांक इस्तेमाल करने की संभावना सबसे ज़्यादा होती है. मैं इस बारे में नहीं बताऊंगी कि वे क्या हैं और वे क्यों काम करते हैं, लेकिन आप उन्हें w नाम के एक अतिरिक्त, चौथे निर्देशांक के साथ 3D निर्देशांकों की तरह मान सकते हैं. अगर आपको पर्सपेक्टिव डिस्टॉर्शन चाहिए, तो यह कोऑर्डिनेट 1 होना चाहिए. हमें w के बारे में चिंता करने की ज़रूरत नहीं है, क्योंकि हम 1 के अलावा किसी और वैल्यू का इस्तेमाल नहीं करेंगे. इसलिए, अब से सभी बिंदु 4-डाइमेंशन वेक्टर [x, y, z, w=1] का इस्तेमाल करेंगे और इस वजह से, मैट्रिक्स को भी 4x4 का होना चाहिए.

सीएसएस के हुड में एक जैसे निर्देशांक इस्तेमाल किए जा सकते हैं. ऐसा तब होता है, जब आपने matrix3d() फ़ंक्शन का इस्तेमाल करके, किसी ट्रांसफ़ॉर्म प्रॉपर्टी में 4x4 वाले आव्यूह तय किए हों. matrix3d 16 तर्क लेता है (क्योंकि मैट्रिक्स 4x4 है), जिसमें एक के बाद एक कॉलम तय होता है. इसलिए, हम इस फ़ंक्शन का इस्तेमाल मैन्युअल तरीके से रोटेशन, अनुवाद वगैरह को बताने के लिए कर सकते हैं. हालांकि, इससे हम उस w कोऑर्डिनेट में भी गड़बड़ी कर सकते हैं!

matrix3d() का इस्तेमाल करने से पहले, हमें 3D कॉन्टेक्स्ट चाहिए – क्योंकि 3D कॉन्टेक्स्ट के बिना, ऐंगल में कोई गड़बड़ी नहीं होगी और न ही एक जैसे कोऑर्डिनेट की ज़रूरत होगी. 3D कॉन्टेक्स्ट बनाने के लिए, हमें perspective वाले कंटेनर और उसके अंदर कुछ ऐसे एलिमेंट की ज़रूरत होगी जिन्हें हम नए बनाए गए 3D स्पेस में बदल सकें. उदाहरण के लिए:

पर्सपेक्टिव कंटेनर में मौजूद एलिमेंट को सीएसएस इंजन, इस तरह प्रोसेस करता है:

• किसी एलिमेंट के हर कोने (वर्टेक्स) को पर्सपेक्टिव कंटेनर के हिसाब से, [x,y,z,w] एक जैसे निर्देशांक में बदलें.
• एलिमेंट के सभी ट्रांसफ़ॉर्म को दाईं से बाईं ओर, मैट्रिक्स के रूप में लागू करें.
• अगर पर्सपेक्टिव एलिमेंट को स्क्रोल किया जा सकता है, तो स्क्रोल मैट्रिक्स लागू करें.
• पर्सपेक्टिव मैट्रिक्स का इस्तेमाल करें.

स्क्रोल मैट्रिक्स, y ऐक्सिस पर हुआ अनुवाद है. अगर हम 400 पिक्सल तक नीचे की ओर स्क्रोल करते हैं, तो सभी एलिमेंट को 400 पिक्सल ऊपर ले जाना होगा. पर्सपेक्टिव मैट्रिक्स एक आव्यूह है, जो गायब होने वाले पॉइंट के करीब पॉइंट करता है. इससे चीज़ों को पीछे की ओर ले जाने पर चीज़ें छोटी नज़र आती हैं, और अनुवाद किए जाने पर वे "धीमी रफ़्तार से चलें". इसलिए, अगर किसी एलिमेंट को पीछे धकेला जाता है, तो 400 पिक्सल का अनुवाद करने से एलिमेंट, स्क्रीन पर सिर्फ़ 300 पिक्सल की जगह लेगा.

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

हमारा बॉक्स, perspective एट्रिब्यूट की वैल्यू p वाले पर्सपेक्टिव कंटेनर के अंदर है. मान लें कि कंटेनर को स्क्रोल किया जा सकता है और उसे नीचे की ओर n पिक्सल तक स्क्रोल किया जा सकता है.

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

हालांकि, हमारे स्क्रोलबार के लिए विपरीत होना चाहिए – नीचे स्क्रोल करने पर हम चाहते हैं कि हमारा एलिमेंट नीचे चले. इसके लिए, हम तरकीबों का इस्तेमाल कर सकते हैं: हमारे बॉक्स के कोनों के w निर्देशांक को उलटा करना. अगर w कोऑर्डिनेट -1 है, तो सभी अनुवाद उलटी दिशा में लागू होंगे. तो हम ऐसा कैसे करें? CSS इंजन, हमारे बॉक्स के कोनों को एक जैसे निर्देशांक में बदल देता है और w को 1 पर सेट करता है. matrix3d() की सफलता का समय आ गया है!

.box {
  transform:
    matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, -1
    );
}

यह मैट्रिक्स w को नेगेटिव बनाने के अलावा कुछ और नहीं करेगा. इसलिए, जब सीएसएस इंजन हर कोने को फ़ॉर्म [x,y,z,1] के वेक्टर में बदल देता है, तो मैट्रिक्स उसे [x,y,z,-1] में बदल देता है.

मैंने अपने एलिमेंट ट्रांसफ़ॉर्म मैट्रिक्स के असर को दिखाने के लिए, एक इंटरमीडिएट चरण को सूची में शामिल किया है. अगर आप मैट्रिक्स गणित के साथ सहज नहीं हैं, तो यह ठीक है. यूरेका मोमेंट में है कि आखिरी पंक्ति में हम स्क्रोल ऑफ़सेट n को घटाने के बजाय अपने y निर्देशांक में जोड़ देते हैं. अगर हम नीचे स्क्रोल करते हैं, तो एलिमेंट का नीचे अनुवाद किया जाएगा.

हालांकि, अगर हम इस मैट्रिक्स को अपने उदाहरण में रखें, तो एलिमेंट नहीं दिखेगा. ऐसा इसलिए है, क्योंकि सीएसएस स्पेसिफ़िकेशन के लिए ज़रूरी है कि w < 0 वाला कोई भी वर्टेक्स, एलिमेंट को रेंडर होने से रोके. फ़िलहाल, हमारा z कोऑर्डिनेट 0 है और p 1 है. इसलिए, w -1 होगा.

अच्छी बात यह है कि हम z की वैल्यू चुन सकते हैं! यह पक्का करने के लिए कि आखिर में w=1 आए, तो हमें z = -2 को सेट करना होगा.

.box {
  transform:
    matrix3d(
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      0, 0, 0, -1
    )
    translateZ(-2px);
}

लो और ध्यान से, हमारा बॉक्स वापस आ गया है!

दूसरा चरण: वीडियो को एक जगह से दूसरी जगह ले जाएं

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

<div class="container">
    <div class="box"></div>
    <span class="spacer"></span>
</div>

<style>
/* … all the styles from the previous example … */
.container {
    overflow: scroll;
}
.spacer {
    display: block;
    height: 500px;
}
</style>

और अब बॉक्स को स्क्रोल करें! लाल बॉक्स नीचे की ओर जा रहा है.

तीसरा चरण: पेज को एक साइज़ देना

हमारे पास एक ऐसा एलिमेंट है जो पेज स्क्रोल करने पर नीचे की ओर जाता है. यह वाकई मुश्किल काम है. अब हमें इसे स्क्रोलबार की तरह दिखाने के लिए स्टाइल देना होगा और इसे और इंटरैक्टिव बनाना होगा.

आम तौर पर, स्क्रोलबार में एक “थंब” और “ट्रैक” होता है, जबकि ट्रैक हमेशा नहीं दिखता. अंगूठे की ऊंचाई इस बात पर निर्भर करती है कि कितना कॉन्टेंट दिख रहा है.

<script>
    const scroller = document.querySelector('.container');
    const thumb = document.querySelector('.box');
    const scrollerHeight = scroller.getBoundingClientRect().height;
    thumb.style.height = /* ??? */;
</script>

scrollerHeight, स्क्रोल किए जा सकने वाले एलिमेंट की ऊंचाई है, जबकि scroller.scrollHeight, स्क्रोल किए जा सकने वाले कॉन्टेंट की कुल ऊंचाई है. scrollerHeight/scroller.scrollHeight, दिखने वाले कॉन्टेंट का कुछ हिस्सा होता है. थंब स्पेस से कवर किए जाने वाले वर्टिकल स्पेस का अनुपात, दिखने वाले कॉन्टेंट के अनुपात के बराबर होना चाहिए:

<script>
    // …
    thumb.style.height =
    scrollerHeight * scrollerHeight / scroller.scrollHeight + 'px';
    // Accommodate for native scrollbars
    thumb.style.right =
    (scroller.clientWidth - scroller.getBoundingClientRect().width) + 'px';
</script>

ध्यान दें: हमें right में बदलाव करना होगा, ताकि पसंद के मुताबिक बनाया गया स्क्रोलबार, स्थायी नेटिव स्क्रोलबार वाले सिस्टम पर दिखे. हम बाद में एक तरकीब की मदद से नेटिव स्क्रोलबार को पूरी तरह छिपा देंगे.

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

इस बारे में सबसे अहम जानकारी यह है कि जब स्क्रोल किया जा सकता है, तब अंगूठे का निचला किनारा, स्क्रोल किए जा सकने वाले एलिमेंट के निचले किनारे की सीध में होना चाहिए. दूसरे शब्दों में: अगर हमने scroller.scrollHeight - scroller.height पिक्सल स्क्रोल किया है, तो हम चाहते हैं कि हमारे अंगूठे का अनुवाद scroller.height - thumb.height से हो. स्क्रोलर के हर पिक्सल के लिए, हम चाहते हैं कि अंगूठा सिर्फ़ एक पिक्सल का हो:

इसी बात को अहमियत दी जाती है. अब हमें स्केलिंग फ़ैक्टर को z ऐक्सिस के साथ अनुवाद में बदलना है, जैसा कि हम पहले ही पैरालैक्स स्क्रोलिंग लेख में कर चुके हैं. खास जानकारी में दिए गए काम के सेक्शन के मुताबिक: स्केलिंग फ़ैक्टर, p/(p - z) के बराबर होता है. हम z के लिए इस समीकरण को हल कर सकते हैं ताकि यह पता लगाया जा सके कि हमें z ऐक्सिस पर अपने अंगूठे का कितना अनुवाद करने की ज़रूरत है. हालांकि, ध्यान रखें कि हमारे साथ काम करने के तरीके की वजह से, हमें z के साथ-साथ अतिरिक्त -2px का अनुवाद करना होगा. यह भी ध्यान रखें कि किसी एलिमेंट के ट्रांसफ़ॉर्म को दाएं से बाएं लागू किया जाता है, इसका मतलब है कि हमारे खास मैट्रिक्स से पहले के सभी अनुवादों को उलटा नहीं किया जाएगा. हालांकि, हमारे खास मैट्रिक्स के बाद के सभी अनुवाद बदले जाएंगे! आइए इसे कोड करें!

<script>
    // ... code from above...
    const factor =
    (scrollerHeight - thumbHeight)/(scroller.scrollHeight - scrollerHeight);
    thumb.style.transform = `
    matrix3d(
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, -1
    )
    scale(${1/factor})
    translateZ(${1 - 1/factor}px)
    translateZ(-2px)
    `;
</script>

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

iOS कैसा रहेगा?

आह, मेरे पुराने दोस्त iOS Safari. पैरालैक्स स्क्रोलिंग की तरह, यहां भी हमें एक समस्या आती है. हम एक एलिमेंट पर स्क्रोल कर रहे हैं, इसलिए हमें -webkit-overflow-scrolling: touch के बारे में बताना होगा. हालांकि, इससे 3D फ़्लैटिंग इफ़ेक्ट काम नहीं करता और हमारा पूरा स्क्रोलिंग इफ़ेक्ट काम करना बंद कर देता है. हमने iOS Safari का पता लगाकर पैरालैक्स स्क्रोलर में इस समस्या को हल किया है. काम करने के लिए position: sticky पर भरोसा किया है. हम यहां भी ठीक यही करेंगे. अपनी यादों को रीफ़्रेश करने के लिए, पैरालैक्सिंग लेख पर एक नज़र डालें.

ब्राउज़र स्क्रोलबार का क्या होगा?

कुछ सिस्टम में, हमें स्थायी और नेटिव स्क्रोलबार का सामना करना होगा. पहले, स्क्रोलबार को छिपाया नहीं जा सकता था (बिना स्टैंडर्ड वाले छद्म सिलेक्टर को छोड़कर). इसलिए, इसे छिपाने के लिए हमें कुछ (गणित से जुड़ी) हैकरी का सहारा लेना होगा. हम स्क्रोलिंग एलिमेंट को overflow-x: hidden के कंटेनर में रैप करते हैं और स्क्रोल करने वाले एलिमेंट को कंटेनर की तुलना में चौड़ा बनाते हैं. ब्राउज़र का नेटिव स्क्रोलबार अब दिख नहीं रहा.

फ़िन

इन सबको एक साथ रखते हुए, हम अब एक फ़्रेम-परफ़ेक्ट वाला कस्टम स्क्रोलबार बना सकते हैं - जैसा कि हमारे Nyan cat डेमो में भी मिलता है.

अगर आपको निया बिल्ली नहीं दिख रही है, तो इसका मतलब है कि डेमो बनाते समय आपको एक ऐसी गड़बड़ी मिली जो हमें मिली और फ़ाइल की गई (नया बिल्ली दिखाने के लिए अंगूठे पर क्लिक करें). Chrome, ग़ैर-ज़रूरी कामों से बचने में बहुत अच्छा है. जैसे, पेंटिंग या स्क्रीन के बाहर की जाने वाली चीज़ों को ऐनिमेट करना. बुरी ख़बर यह है कि हमारे मैट्रिक्स शैनिगन से Chrome को लगता है कि नियान बिल्ली वाला GIF असल में स्क्रीन से दूर है. उम्मीद है कि यह समस्या जल्द ही ठीक हो जाएगी.

तैयारी पूरी हो गई. यह बहुत सारा काम था. पूरी किताब पढ़ने के लिए मैं आपकी तारीफ़ करता हूं. यह काम करने का यह एक आसान चाल है और शायद इसके बाद शायद ही मेहनत करने का फ़ायदा मिलेगा. ऐसा सिर्फ़ तब होगा, जब पसंद के मुताबिक बनाया गया स्क्रोलबार, अनुभव का एक ज़रूरी हिस्सा हो. लेकिन यह जानकर अच्छा लगा कि ऐसा हो सकता है, नहीं? कस्टम स्क्रोलबार को लागू करना मुश्किल होता है. इससे पता चलता है कि सीएसएस की तरफ़ से भी काम किया जाना है. लेकिन डरें नहीं! आने वाले समय में, Houdini की AnimationWorklet सुविधा से, इस तरह के फ़्रेम को बेहतरीन तरीके से स्क्रोल करने लायक बनाने में आसानी होगी.