सिंगल एलिमेंट लोडर: 3डी जा रहे हैं!

हमारे इस चौथे और अंतिम लेख के लिए एकल-तत्व लोडर पर छोटी श्रृंखला, हम 3D पैटर्न का पता लगाने जा रहे हैं। एक 3D तत्व बनाते समय, यह कल्पना करना कठिन है कि केवल एक HTML तत्व एक घन के सभी छह चेहरों की तरह कुछ अनुकरण करने के लिए पर्याप्त है। लेकिन शायद हम कुछ और घन लेकर निकल सकते हैं-पसंद इसके बजाय आकृति के केवल सामने के तीन पक्षों को दिखाकर — यह पूरी तरह से संभव है और यही हम एक साथ करने जा रहे हैं।

विभाजित घन लोडर

यहाँ एक 3D लोडर है जहाँ एक घन को दो भागों में विभाजित किया जाता है, लेकिन केवल एक ही तत्व के साथ बनाया जाता है:

घन का प्रत्येक आधा छद्म तत्व का उपयोग करके बनाया गया है:

बिल्कुल सटीक?! हम सीएसएस के साथ एक शंकु ढाल का उपयोग कर सकते हैं clip-path तत्व के पर ::before और ::after स्यूडोस एक 3डी क्यूब के तीन दृश्यमान चेहरों का अनुकरण करने के लिए। नकारात्मक मार्जिन वह है जो दो छद्मों को एक पूर्ण घन को ओवरलैप और अनुकरण करने के लिए एक साथ खींचता है। हमारा बाकी काम ज्यादातर साफ-सुथरे दिखने वाले लोडर पाने के लिए उन दो हिस्सों को एनिमेट करना है!

आइए एक दृश्य देखें जो इस घन-जैसे तत्व को बनाने के लिए उपयोग किए गए क्लिप-पथ बिंदुओं के पीछे के गणित की व्याख्या करता है:

हमारे पास हमारे चर और समीकरण हैं, तो चलिए उन्हें काम पर रखते हैं। सबसे पहले, हम अपने चर स्थापित करेंगे और मुख्य के लिए आकार निर्धारित करेंगे .loader तत्व:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

अब तक कुछ भी पागल नहीं है। हमारे पास एक 150px वर्ग जो एक लचीले कंटेनर के रूप में स्थापित किया गया है। अब हम अपने छद्म स्थापित करते हैं:

.loader::before,
.loader::after { content: ""; flex: 1;
}

वे दो हिस्सों में हैं .loader कंटेनर। हमें उन्हें रंगने की जरूरत है, ताकि हमारा शंक्वाकार ढाल तोड़ता है:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

ढाल तो है, लेकिन यह अजीब लग रहा है। हमारे लिए आवश्यक है इसे तत्व पर क्लिप करें:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

आइए सुनिश्चित करें कि दो भाग a . के साथ ओवरलैप करते हैं नकारात्मक मार्जिन:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

अब चलो उन्हें चलते हैं!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

यहाँ एक बार फिर अंतिम डेमो है:

प्रगति घन लोडर

आइए 3D प्रगति लोडर बनाने के लिए उसी तकनीक का उपयोग करें। हाँ, अभी भी केवल एक तत्व!

लोडर की ऊंचाई और पहलू अनुपात को बदलने के अलावा, हम क्यूब को उसी तरह से नहीं बदल रहे हैं जैसे हमने पहले किया था। हम जो एनीमेशन बना रहे हैं, वह आश्चर्यजनक रूप से आसान तकनीक पर निर्भर करता है, जहां हम बाईं ओर की चौड़ाई को अपडेट करते हैं जबकि दाईं ओर शेष स्थान को भरता है, धन्यवाद flex-grow: 1.

पहला कदम दाईं ओर कुछ पारदर्शिता जोड़ने के लिए है opacity:

यह इस प्रभाव का अनुकरण करता है कि घन का एक पक्ष भरा हुआ है जबकि दूसरा खाली है। फिर हम बाईं ओर का रंग अपडेट करते हैं। ऐसा करने के लिए, हम या तो शंकु ढाल के अंदर तीन रंगों को अपडेट करते हैं या हम इसे a . के साथ पृष्ठभूमि रंग जोड़कर करते हैं background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

यह ट्रिक हमें केवल एक बार रंग अपडेट करने की अनुमति देती है। लोडर का दाहिना हिस्सा हमारे रंग के तीन नए रंगों को बनाने के लिए शंकु ढाल से सफेद के तीन रंगों के साथ मिश्रित होता है, भले ही हम केवल एक रंग मान का उपयोग कर रहे हों। रंग प्रवंचना!

आइए लोडर के बाईं ओर की चौड़ाई को चेतन करें:

ओह, एनीमेशन शुरुआत में थोड़ा अजीब है! ध्यान दें कि यह क्यूब के बाहर कैसे शुरू होता है? ऐसा इसलिए है क्योंकि हम एनिमेशन को यहां से शुरू कर रहे हैं 0% चौड़ाई। लेकिन के कारण clip-path और नकारात्मक मार्जिन हम उपयोग कर रहे हैं, इसके बजाय हमें जो करना है वह हमारे से शुरू होता है --_d चर, जिसे हम परिभाषित करते थे clip-path अंक और नकारात्मक मार्जिन:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

यह थोड़ा बेहतर है:

लेकिन हम इस एनिमेशन को और भी स्मूथ बना सकते हैं। क्या आपने देखा कि हमें कुछ याद आ रहा है? उस अंतिम डेमो के साथ अंतिम डेमो कैसा दिखना चाहिए, इसकी तुलना करने के लिए मैं आपको एक स्क्रीनशॉट दिखाता हूं:

यह घन का निचला भाग है! चूंकि दूसरा तत्व पारदर्शी है, हमें उस आयत के निचले हिस्से को देखने की जरूरत है जैसा कि आप बाएं उदाहरण में देख सकते हैं। यह सूक्ष्म है, लेकिन वहां होना चाहिए!

हम मुख्य तत्व में एक ढाल जोड़ सकते हैं और इसे क्लिप कर सकते हैं जैसे हमने छद्मों के साथ किया था:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

सब कुछ एक साथ खींचने के बाद यहां पूरा कोड दिया गया है:

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

इतना ही! हमने सिर्फ एक चतुर तकनीक का उपयोग किया है जो छद्म तत्वों, शंकु ग्रेडिएंट्स, क्लिपिंग, पृष्ठभूमि सम्मिश्रण और नकारात्मक मार्जिन का उपयोग करता है, एक नहीं, बल्कि दो मीठे दिखने वाले 3D लोडर, जिनमें मार्कअप में एक ही तत्व से अधिक कुछ नहीं है।

अधिक 3डी

हम अभी भी आगे बढ़ सकते हैं और एक तत्व का उपयोग करके अनंत संख्या में 3D क्यूब्स का अनुकरण कर सकते हैं - हाँ, यह संभव है! यहाँ क्यूब्स का एक ग्रिड है:

लेखन के समय यह डेमो और निम्नलिखित डेमो सफारी में समर्थित नहीं हैं।

पागल, है ना? अब हम एक ही तत्व का उपयोग करके बनाए गए क्यूब्स का दोहराए गए पैटर्न बना रहे हैं ... और कोई छद्म भी नहीं! मैं उस गणित के बारे में विस्तार से नहीं बताऊंगा जिसका हम उपयोग कर रहे हैं (वहां बहुत विशिष्ट संख्याएं हैं) लेकिन यहां यह देखने के लिए एक आंकड़ा है कि हम यहां कैसे पहुंचे:

हम पहले a . का उपयोग करते हैं conic-gradient दोहराए जाने वाले क्यूब पैटर्न बनाने के लिए। पैटर्न की पुनरावृत्ति को तीन चर द्वारा नियंत्रित किया जाता है:

• --size: अपने नाम के अनुरूप, यह प्रत्येक घन के आकार को नियंत्रित करता है।
• --m: यह कॉलम की संख्या को दर्शाता है।
• --n: यह पंक्तियों की संख्या है।
• --gap: यह घनों के बीच की दूरी या दूरी

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

फिर हम समान आकार वाले दूसरे पैटर्न का उपयोग करके एक मुखौटा परत लागू करते हैं। यह इस विचार का सबसे पेचीदा हिस्सा है। a . के संयोजन का उपयोग करना linear-gradient और एक conic-gradient हम केवल घन आकृतियों को दृश्यमान रखने के लिए अपने तत्व के कुछ हिस्सों को काटेंगे।

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

कोड थोड़ा जटिल लग सकता है, लेकिन CSS वेरिएबल्स के लिए धन्यवाद, हमें अपने क्यूब्स के मैट्रिक्स को नियंत्रित करने के लिए कुछ मूल्यों को अपडेट करने की आवश्यकता है। 10⨉10 ग्रिड की आवश्यकता है? अपडेट करें --m और --n चर करने के लिए 10. क्यूब्स के बीच एक व्यापक अंतर की आवश्यकता है? अपडेट करें --gap मूल्य। रंग मान केवल एक बार उपयोग किए जाते हैं, इसलिए उन्हें नए रंग पैलेट के लिए अपडेट करें!

अब जबकि हमारे पास एक और 3D तकनीक है, आइए इसका उपयोग विभिन्न एनिमेशन के साथ खेलकर लोडर की विविधताएं बनाने के लिए करते हैं। उदाहरण के लिए, बाएँ से दाएँ असीम रूप से खिसकने वाले घनों के दोहराए जाने वाले पैटर्न के बारे में क्या?

यह लोडर एक ही पंक्ति में चार क्यूब्स को परिभाषित करता है। इसका मतलब है हमारा --n मूल्य है 4 और --m के बराबर है 1 . दूसरे शब्दों में, हमें अब इनकी आवश्यकता नहीं है!

इसके बजाय, हम इसके साथ काम कर सकते हैं --size और --gap ग्रिड कंटेनर में चर:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

यह हमारा कंटेनर है। हमारे पास चार घन हैं, लेकिन एक बार में केवल तीन को कंटेनर में दिखाना चाहते हैं ताकि हमारे पास हमेशा एक स्लाइडिंग हो क्योंकि एक बाहर खिसक रहा है। इसलिए हम चौड़ाई को द्वारा फैक्टर कर रहे हैं 3 और पक्षानुपात को पर सेट करें 3 किया जा सकता है।

आइए सुनिश्चित करें कि हमारे घन पैटर्न को चार घनों की चौड़ाई के लिए सेट किया गया है। हम इसे कंटेनर पर करने जा रहे हैं ::before छद्म तत्व:

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

अब जब हमारे पास तीन-क्यूब कंटेनर में चार क्यूब हैं, तो हम क्यूब पैटर्न को ग्रिड कंटेनर के अंत तक ओवरफ्लो करने के लिए सही ठहरा सकते हैं, अंतिम तीन क्यूब्स दिखा सकते हैं:

.loader { /* same as before */ justify-content: end;
}

ग्रिड कंटेनर की सीमा दिखाने के लिए लाल रूपरेखा के साथ अब तक हमारे पास यह है:

अब हमें केवल अपने एनिमेशन को जोड़कर छद्म तत्व को दाईं ओर ले जाना है:

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

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

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

हम एक चर पेश करके इसे और अधिक लचीला बना सकते हैं, --n, यह निर्धारित करने के लिए कि एक बार में कंटेनर में कितने क्यूब प्रदर्शित होते हैं। और चूंकि पैटर्न में घनों की कुल संख्या . से एक अधिक होनी चाहिए --n, हम इसे इस प्रकार व्यक्त कर सकते हैं calc(var(--n) + 1).

पेश है पूरी बात:

ठीक है, एक और 3D लोडर जो समान है, लेकिन इसमें क्यूब्स फिसलने के बजाय क्रमिक रूप से रंग बदलते हैं:

हम एक एनिमेटेड पृष्ठभूमि पर भरोसा करने जा रहे हैं background-blend-mode इसके लिए:

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

मैंने पिछले उदाहरण के समान लेआउट बनाने के लिए उपयोग किए गए अनावश्यक कोड को हटा दिया है, लेकिन चार के बजाय तीन क्यूब्स के साथ। मैं यहां जो जोड़ रहा हूं वह एक विशिष्ट रंग के साथ परिभाषित एक ढाल है जो शंकु ढाल के साथ मिश्रित होता है, जैसा कि हमने पहले प्रगति पट्टी 3 डी लोडर के लिए किया था।

वहां से, यह बैकग्राउंड ग्रेडिएंट को एनिमेट कर रहा है background-position क्यूब्स को एक बार में एक रंग ब्लिंक करने के लिए तीन-चरणीय एनीमेशन के रूप में।

यदि आप उन मूल्यों से परिचित नहीं हैं जिनका मैं उपयोग कर रहा हूँ background-position और पृष्ठभूमि वाक्यविन्यास, मैं अत्यधिक अनुशंसा करता हूं मेरे पिछले लेखों में से एक और में से एक मेरा स्टैक ओवरफ्लो उत्तर. आपको वहां बहुत विस्तृत विवरण मिलेगा।

क्या हम इसे चर बनाने के लिए घनों की संख्या को अद्यतन कर सकते हैं?

हाँ, मेरे पास एक है उसके लिए समाधान, लेकिन मैं चाहता हूं कि आप इसे यहां एम्बेड करने के बजाय इसमें दरार डालें। पिछले उदाहरण से हमने जो सीखा है उसे लें और इसके साथ भी ऐसा ही करने का प्रयास करें - फिर टिप्पणियों में अपना काम साझा करें!

विविधताएं प्रचुर मात्रा में हैं!

इस श्रृंखला के अन्य तीन लेखों की तरह, मैं आपको आगे बढ़ने और अपने स्वयं के लोडर बनाने के लिए कुछ प्रेरणा देना चाहता हूं। यहां एक संग्रह है जिसमें 3D लोडर शामिल हैं जिन्हें हमने एक साथ बनाया है, साथ ही आपकी कल्पना को आगे बढ़ाने के लिए कुछ अन्य:

वह एक कवर है

मुझे यकीन है कि आशा है कि आपने पिछले कुछ हफ्तों में मेरे साथ सिंगल एलिमेंट लोडर बनाने में समय बिताया है। यह पागलपन की बात है कि हमने प्रतीत होने वाले साधारण स्पिनर के साथ शुरुआत की और फिर धीरे-धीरे 3D तकनीकों तक अपने आप को काम करने के लिए नए टुकड़े जोड़े जो अभी भी मार्कअप में केवल एक तत्व का उपयोग करते हैं। जब हम इसकी शक्तियों का उपयोग करते हैं तो सीएसएस बिल्कुल वैसा ही दिखता है: स्केलेबल, लचीला और पुन: प्रयोज्य।

इस छोटी सी श्रंखला को पढ़ने के लिए एक बार फिर धन्यवाद! मैं आपको याद दिलाकर साइन ऑफ करूंगा कि मेरे पास a . है 500 से अधिक लोडर का संग्रह यदि आप अधिक विचारों और प्रेरणा की तलाश में हैं।

---

सिंगल एलिमेंट लोडर: 3डी जा रहे हैं! मूल रूप से प्रकाशित सीएसएस-ट्रिक्स। तुम्हे करना चाहिए समाचार पत्र प्राप्त करें.

• कॉइनस्मार्ट। यूरोप का सर्वश्रेष्ठ बिटकॉइन और क्रिप्टो एक्सचेंज।
• प्लेटोब्लॉकचैन। Web3 मेटावर्स इंटेलिजेंस। ज्ञान प्रवर्धित। नि: शुल्क प्रवेश।
• क्रिप्टोहॉक। Altcoin रडार। मुफ्त परीक्षण।
• स्रोत: https://css-tricks.com/single-element-loaders-going-3d/