कम शब्दों में कहा जाए तो
क्या आपको छोटी-छोटी चीज़ों में कोई दिलचस्पी नहीं है? आपको सिर्फ़ इस बारे में जानना है कि नयन बिल्ली का डेमो और लाइब्रेरी दिखाओ? डेमो का कोड यहां देखें: GitHub रेपो.
LAM;WRA (लंबा और गणितीय; फिर भी पढ़ेगा)
कुछ समय पहले, हमने एक पैरालैक्स स्क्रोलर बनाया था (क्या आपने वह लेख है? यह वाकई बहुत अच्छा है और अपना समय देना फ़ायदेमंद है!). CSS 3D का उपयोग करके तत्वों को वापस पुश करके में बदलने के साथ-साथ, एलिमेंट हमारी असल स्क्रोलिंग स्पीड से कम हो जाते हैं.
रीकैप
आइए, एक बार फिर से बताते हैं कि पैरालैक्स स्क्रोलर कैसे काम करता था.
जैसा कि ऐनिमेशन में दिखाया गया है, हमने एलिमेंट को पुश करके पैरालैक्स इफ़ेक्ट हासिल किया Z ऐक्सिस पर, 3D स्पेस में “पीछे की ओर” हाइलाइट किया गया है. किसी दस्तावेज़ को स्क्रोल करना Y ऐक्सिस की मदद से अनुवाद पाना. इसलिए अगर हम नीचे स्क्रोल करते हैं, तो मान लें कि 100px, हर एलिमेंट का अनुवाद 100 पिक्सल तक ऊपर किया जाएगा. यह सभी एलिमेंट पर लागू होता है, वे भी जो “पुराने” हैं. लेकिन क्योंकि वे बहुत दूर हैं तो स्क्रीन पर उनकी निगरानी की गई हलचल 100 पिक्सल से कम होगी. इससे यह पता चलेगा कि पसंदीदा पैरालैक्स प्रभाव.
बेशक, किसी तत्व को वापस अंतरिक्ष में ले जाने से वह छोटा दिखाई देगा, जिसे हम एलिमेंट का बैक अप लेकर, ठीक करते हैं. हमने असली गणित का पता लगाया जब हमने पैरालैक्स स्क्रोलर, इसलिए, मैं पूरी जानकारी नहीं दोहराऊंगी.
पहला चरण: हम क्या करना चाहते हैं?
स्क्रोलबार. हम यही टूल बनाने वाले हैं. हालांकि, क्या आपने कभी सोचा है कि वे क्या काम करती हैं? निश्चित रूप से मुझे नहीं पता था. स्क्रोलबार से पता चलता है कि फ़िलहाल, उपलब्ध कॉन्टेंट का कितना हिस्सा दिख रहा है और कितना कॉन्टेंट देखा जा रहा है पाठकों ने क्या किया है. नीचे स्क्रोल करने पर, स्क्रोलबार भी यह इंगित करता है कि आप अंत की ओर प्रगति कर रहे हैं. अगर सभी कॉन्टेंट आम तौर पर, स्क्रोलबार व्यूपोर्ट में छिपा होता है. अगर कॉन्टेंट की ऊंचाई, व्यूपोर्ट से दोगुनी है, तो स्क्रोलबार, व्यूपोर्ट की ऊंचाई का 1⁄2 हिस्सा भर देता है. दोगुना तक का कॉन्टेंट व्यूपोर्ट, स्क्रोलबार को व्यूपोर्ट वगैरह के 1⁄3 तक स्केल करता है. आपको पैटर्न दिखता है. स्क्रोल करने के बजाय, स्क्रोलबार पर क्लिक करके उसे ड्रैग करके भी आगे बढ़ें को तेज़ी से लोड कर सकें. यह किसी सामान्य व्यक्ति से बहुत अलग होता है मिलते-जुलते एलिमेंट. आइए, एक बार में एक ही लड़ाई लड़ें.
चरण 1: वैल्यू को उलटा रखना
ठीक है, सीएसएस 3D की मदद से, हम एलिमेंट को स्क्रोल करने की स्पीड से ज़्यादा धीमी कर सकते हैं में बदल जाता है, जैसा कि पैरालैक्स स्क्रोलिंग लेख में बताया गया है. क्या हम उनकी वापसी भी कर सकते हैं की दिशा क्या है? अब हम ऐसा कर सकते हैं और इसी तरह से फ़्रेम-परफ़ेक्ट, कस्टम स्क्रोलबार. यह समझने के लिए कि यह कैसे काम करता है, हमें कुछ सीएसएस 3D बेसिक पेजों को चुनें.
गणित के नज़रिए से किसी भी तरह का अनुमान पाने के लिए, आपको आख़िर में इसका इस्तेमाल करके एक जैसा निर्देशांक. मैं इस बारे में ज़्यादा जानकारी नहीं दे सकती कि वे क्या हैं और क्यों काम करती हैं. हालांकि, अगर ज़रूरत हो, तो उन्हें 3D निर्देशांक की तरह बनाया जाता है, जिसमें w नाम का एक अतिरिक्त चौथा निर्देशांक होता है. यह निर्देशांक 1 होना चाहिए, लेकिन अगर आप चाहते हैं कि ऐंगल डिस्टॉर्शन न हो. बुध आपको w के ब्यौरे के बारे में चिंता करने की ज़रूरत नहीं है, क्योंकि हम इसका इस्तेमाल वैल्यू के तौर पर 1 के अलावा कोई अन्य वैल्यू डालें. इसलिए, सभी बिंदु अब से 4-विमीय सदिशों (वेक्टर) पर आधारित हैं [x, y, z, w=1] और इसके कारण आव्यूहों को चाहिए साइज़ 4x4 वाला हो सकता है.
एक ऐसे अवसर पर जहां आप यह देख सकते हैं कि सीएसएस
हुड तब होता है, जब आप
matrix3d() फ़ंक्शन का इस्तेमाल करना होगा. matrix3d में 16 आर्ग्युमेंट इस्तेमाल किए जाते हैं, क्योंकि मैट्रिक्स
4x4), दूसरे कॉलम के बाद एक कॉलम तय करता है. इसलिए हम इस फ़ंक्शन का इस्तेमाल इन कामों के लिए कर सकते हैं
मैन्युअल रूप से रोटेशन, अनुवाद वगैरह के बारे में बताता है, लेकिन इसकी मदद से हम वह काम भी कर सकते हैं
उस w कोऑर्डिनेट के साथ गड़बड़ी है!
matrix3d() का इस्तेमाल करने से पहले, हमें 3D संदर्भ की ज़रूरत है
3D में कॉन्टेक्स्ट देखने के लिए, न तो कोई डिस्टॉर्शन नहीं होगा और न ही
एक जैसे निर्देशांक. 3D संदर्भ बनाने के लिए, हमें एक कंटेनर चाहिए जिसमें
perspective और इसके अंदर मौजूद कुछ एलिमेंट, जिन्हें हम नए
3D स्पेस बनाया गया. इसके लिए
उदाहरण:
पर्सपेक्टिव कंटेनर में मौजूद एलिमेंट को सीएसएस इंजन प्रोसेस करता है इस तरह से:
- किसी एलिमेंट के हर कोने (वर्टेक्स) को समांगी निर्देशांक में बदलें
[x,y,z,w], पर्सपेक्टिव कंटेनर से जुड़ा हुआ है. - एलिमेंट के सभी रूपांतरण को दाएं से बाएं तक आव्यूह के रूप में लागू करें.
- अगर पर्सपेक्टिव एलिमेंट को स्क्रोल किया जा सकता है, तो स्क्रोल मैट्रिक्स लागू करें.
- पर्सपेक्टिव मैट्रिक्स लागू करें.
स्क्रोल मैट्रिक्स y ऐक्सिस के साथ किया गया एक अनुवाद है. अगर हम नीचे स्क्रोल करकेनीचे करते हैं, तो 400px, सभी एलिमेंट को 400px से ऊपर ले जाना चाहिए. पर्सपेक्टिव मैट्रिक्स वह आव्यूह जो 3D में लुप्त होने के समय के बिलकुल करीब पहुंच जाता है अंतरिक्ष होते हैं. इससे चीज़ें छोटी दिखने पर दोनों असर पड़ता है वे काफ़ी पीछे जाते हैं और अनुवाद किए जाने पर उन्हें "धीमी गति से ले जाते हैं". इसलिए अगर किसी एलिमेंट को पीछे किया जाता है, तो 400px का अनुवाद करने पर वह एलिमेंट का इस्तेमाल करें.
अगर आपको पूरी जानकारी चाहिए, तो सीएसएस की खास जानकारी रेंडरिंग मॉडल को बदल देते हैं, लेकिन इस लेख के मकसद से, मैंने एल्गोरिदम ऊपर दी गई जानकारी देखें.
हमारा बॉक्स एक ऐसे पर्सपेक्टिव कंटेनर के अंदर है, जिसका 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);
}
ध्यान दें, हमारा बॉक्स वापस आ गया है!
चरण 2: उसे एक जगह से दूसरी जगह ले जाना
अब हमारा बॉक्स वहां है और पहले जैसा ही दिख रहा है पूरी तरह से बदल देता है. फ़िलहाल, पर्सपेक्टिव कंटेनर को स्क्रोल नहीं किया जा सकता. इसलिए, हम नहीं कर सकते उसे देखते हैं, लेकिन हम जानते हैं कि जब हमारा तत्व अन्य दिशा में जाएगा, स्क्रोल किया गया. चलिए, कंटेनर को स्क्रोल करने के लिए कहते हैं, क्या हम? हम बस एक स्पेसर एलिमेंट जो जगह लेता है:
<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>
अंगूठे का साइज़ है अच्छे लग रहे हैं, लेकिन यह बहुत तेज़ी से आगे बढ़ रहा है. यहां से हम अपनी तकनीक को पैरालैक्स स्क्रोलर. अगर हम एलिमेंट को पीछे ले जाते हैं, तो यह धीरे-धीरे चलेगा स्क्रोल करें. हम उसका साइज़ बढ़ाकर, उसे ठीक कर सकते हैं. हालांकि, हमें पता है कि करना भी न पड़े? चलिए, जानते हैं – गणित! यह आखिरी बार है, वादा करना.
जानकारी की अहम बात यह है कि हम चाहते हैं कि
पूरी तरह स्क्रोल करने पर स्क्रोल किए जा सकने वाले एलिमेंट के निचले किनारे के साथ लाइन अप करें
नीचे. दूसरे शब्दों में: अगर हमने
scroller.scrollHeight - scroller.height पिक्सेल, हम चाहते हैं कि हमारा अंगूठा
scroller.height - thumb.height ने अनुवाद किया है. स्क्रोलर के हर पिक्सल के लिए, हम
हम चाहते हैं कि हमारा अंगूठा पिक्सल के कुछ हिस्से को मूव करे:
यह हमारी स्केलिंग कारक है. अब हमें स्केलिंग फ़ैक्टर को
z ऐक्सिस के साथ अनुवाद, जिसे हम पहले से ही पैरालैक्स स्क्रोलिंग में कर चुके हैं
लेख. इसके अनुसार
खास जानकारी में काम के सेक्शन को शामिल करें:
स्केलिंग फ़ैक्टर, p/(p - z) के बराबर होता है. z से z तक का समीकरण हल करें.
यह पता लगाना कि हमें z ऐक्सिस पर अपने अंगूठे का अनुवाद करने के लिए कितनी ज़रूरत है. लेकिन रखें
यह बात ध्यान में रखते हुए कि हमारे w निर्देशांक के साथ किए गए धोखाधड़ी के कारण, हमें एक
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>
हमारे पास स्क्रोलबार! यह सिर्फ़ एक DOM एलिमेंट है. हम इसे अपनी पसंद के मुताबिक स्टाइल कर सकते हैं. एक चीज़, जो है के लिए आसान है, लेकिन क्लिक करके खींचें और छोड़ें, क्योंकि कई उपयोगकर्ता इस तरह स्क्रोलबार से इंटरैक्ट करते हैं. अगर मैं इस ब्लॉग पोस्ट को लंबे समय तक नहीं बनाऊं, तो मैं इसके बारे में नहीं बताऊंगा जानकारी मिलेगी. इन बातों पर ध्यान दें: लाइब्रेरी कोड देखें.
iOS कैसा रहेगा?
अरे, मेरे पुराने दोस्त iOS Safari. पैरालैक्स स्क्रोलिंग की तरह, हम
समस्या है. हम किसी एलिमेंट पर स्क्रोल कर रहे हैं, इसलिए हमें यह बताना होगा कि
-webkit-overflow-scrolling: touch, लेकिन इसकी वजह से 3D फ़्लैट हो जाता है और हमारे पूरे
स्क्रोलिंग इफ़ेक्ट काम करना बंद कर देता है. हमने पैरालैक्स स्क्रोलर में इस सवाल को हल किया
ऐसा करने के लिए, iOS Safari का पता लगाया जा सकता है और समाधान के तौर पर position: sticky पर भरोसा किया जा सकता है.
हम यहां भी ऐसा ही करेंगे. इन बातों पर ध्यान दें:
पैरालेसिंग लेख
ताकि आपकी याद को ताज़ा किया जा सके.
ब्राउज़र का स्क्रोलबार कैसा होता है?
कुछ सिस्टम में, हमें स्थायी, नेटिव स्क्रोलबार का इस्तेमाल करना होगा.
ऐतिहासिक रूप से, स्क्रॉलबार को छिपाया नहीं जा सकता (केवल
नॉन-स्टैंडर्ड pseudo-selector).
इसलिए, इसे छिपाने के लिए हमें कुछ (गणित के बिना) हैकरी का सहारा लेना पड़ता है. हमने अपनी
overflow-x: hidden वाले कंटेनर में स्क्रोलिंग एलिमेंट जोड़कर
कंटेनर से ज़्यादा चौड़ा स्क्रोल होने वाला एलिमेंट. ब्राउज़र का मूल स्क्रोलबार यह है
अब व्यू से बाहर है.
Fin
इन सभी को एक साथ रखकर, हम एक फ़्रेम-परफ़ेक्ट कस्टम कस्टम बना सकते हैं स्क्रोलबार – जैसा कि हमारी नयन बिल्ली का डेमो.
अगर आपको न्यान बिल्ली नहीं दिख रही, तो इसका मतलब है कि एक गड़बड़ी मिली, जो हमें मिली इस डेमो को बनाते समय (नायन बिल्ली को दिखाने के लिए, अंगूठे पर क्लिक करें). Chrome ग़ैर-ज़रूरी कामों से बचने में बहुत अच्छा है जैसे, जो चीज़ें स्क्रीन पर नहीं दिखती हैं उन्हें पेंट करना या ऐनिमेट करना. बुरी खबर यह है कि हमारे मैट्रिक्स शेनैनिगेंस से Chrome को लगता है कि न्यान कैट gif असल में ऑफ़ स्क्रीन है. उम्मीद है कि यह समस्या जल्द ही ठीक हो जाएगी.
यह हो गया. बहुत काम की ज़रूरत थी. पूरा कॉन्टेंट पढ़ने के लिए धन्यवाद . यह कुछ जो इतने बड़े पैमाने पर काम करता है और ऐसी कोशिश शायद ही कभी फ़ायदेमंद हो, को छोड़कर, जब पसंद के मुताबिक बनाया गया स्क्रोलबार, अनुभव का एक ज़रूरी हिस्सा हो. लेकिन यह जानकर अच्छा लगा कि ऐसा किया जा सकता है, नहीं? यह बात करना बहुत मुश्किल है कि कस्टम स्क्रोलबार से पता चलता है कि सीएसएस की ओर से काम किया जाना है. लेकिन डरें नहीं! आने वाले समय में, Houdini का AnimationWorklet फ़्रेम-परफ़ेक्ट स्क्रोल-लिंक किए गए इफ़ेक्ट, जैसे कि यह बहुत आसान है.