सीएसएस अनंत 3डी स्लाइडर्स

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

इस बार, हम तीसरे आयाम में गोता लगा रहे हैं। यह पहली बार में कठिन लग रहा है, लेकिन बहुत सारे कोड जो हम देख रहे हैं, वही हैं जो हमने इस श्रृंखला के पहले दो लेखों में कुछ संशोधनों के साथ उपयोग किए थे। इसलिए, यदि आप अभी श्रृंखला में शामिल हो रहे हैं, तो मैं सुझाव दूंगा कि हम यहां जिन अवधारणाओं का उपयोग कर रहे हैं, उनके संदर्भ में दूसरों की जाँच करें।

हम यही लक्ष्य कर रहे हैं:

पहली नज़र में, ऐसा लगता है कि हमारे पास चार छवियों वाला एक घूमता हुआ घन है। लेकिन वास्तव में, हम कुल छह छवियों के साथ काम कर रहे हैं। यहाँ एक अलग कोण से स्लाइडर है:

अब जब हमारे पास एक अच्छा दृश्य है कि छवियों को कैसे व्यवस्थित किया जाता है, आइए कोड को विच्छेदित करें कि हम वहां कैसे पहुंचे।

बुनियादी सेटअप

अन्य स्लाइडर्स के लिए उपयोग किए गए बाकी स्लाइडर्स के समान HTML:

और एक बार फिर, हम छवियों को एक के ऊपर एक स्टैक में रखने के लिए CSS ग्रिड का उपयोग कर रहे हैं:

.gallery {
  display: grid;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 160px;
  aspect-ratio: 1;
  object-fit: cover;
}

एनीमेशन

इस स्लाइडर का तर्क बहुत समान है पहले लेख से गोलाकार स्लाइडर. वास्तव में, यदि आप ऊपर दिए गए वीडियो को फिर से देखते हैं, तो आप देख सकते हैं कि छवियों को इस तरह से रखा गया है जिससे एक बहुभुज बन जाता है। पूर्ण घुमाव के बाद, यह पहली छवि पर लौटता है।

हम CSS पर निर्भर थे transform-origin और animation-delay उस पहले स्लाइडर के लिए गुण। एक ही एनीमेशन सभी छवि तत्वों पर लागू होता है, जो एक ही बिंदु के चारों ओर घूमते हैं। फिर, विभिन्न विलंबों का उपयोग करके, हम सभी छवियों को एक बड़े वृत्त के चारों ओर सही ढंग से रखते हैं।

हमारे 3डी स्लाइडर के लिए कार्यान्वयन थोड़ा अलग होगा। का उपयोग करते हुए transform-origin यहां काम नहीं करेगा क्योंकि हम 3डी में काम कर रहे हैं, इसलिए हम इसका इस्तेमाल करेंगे transform इसके बजाय सभी छवियों को सही ढंग से रखने के लिए, फिर कंटेनर को घुमाएं।

हम सास के लिए फिर से पहुंच रहे हैं ताकि हम छवियों की संख्या के माध्यम से लूप कर सकें और हमारे परिवर्तन लागू कर सकें:

@for $i from 1 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
     transform: 
       rotate(#{360*($i - 1) / $n}deg) /* 1 */
       translateY(50% / math.tan(180deg / $n)) /* 2 */ 
       rotateX(90deg); /* 3 */
  }
}

आप सोच रहे होंगे कि हम सीधे सास में क्यों कूद रहे हैं। हमने किसी भी संख्या के खाते के लिए सैस के साथ कोड को सामान्यीकृत करने से पहले अन्य लेखों में वेनिला सीएसएस का उपयोग करके छवियों की एक निश्चित संख्या के साथ शुरुआत की (N) छवियों का। खैर, मुझे लगता है कि अब आपको यह विचार मिल गया है और हम वास्तविक कार्यान्वयन के लिए खोज के सभी कार्यों को समाप्त कर सकते हैं।

RSI transform संपत्ति तीन मान ले रही है, जिसे मैंने यहां दिखाया है:

हम पहले सभी छवियों को एक दूसरे के ऊपर घुमाते हैं। रोटेशन का कोण छवियों की संख्या पर निर्भर करता है। के लिये N छवियां, हमारे पास बराबर वृद्धि है 360deg/N। तब हम translate सभी छवियों को एक ही मात्रा में इस तरह से बनाया जाता है कि उनके केंद्र बिंदु किनारों पर मिलते हैं।

कुछ उबाऊ ज्यामिति है जो यह समझाने में मदद करती है कि यह सब कैसे काम करता है, लेकिन दूरी बराबर है 50%/tan(180deg/N). सर्कुलर स्लाइडर बनाते समय हमने एक समान समीकरण से निपटा ( transform-origin: 50% 50%/sin(180deg/N) ).

अंत में, हम छवियों को एक्स-अक्ष के चारों ओर घुमाते हैं 90deg हम जो व्यवस्था चाहते हैं उसे प्राप्त करने के लिए। यहाँ एक वीडियो है जो दिखाता है कि अंतिम घुमाव क्या कर रहा है:

अब हमें बस इतना करना है कि अपने अनंत स्लाइडर को बनाने के लिए पूरे कंटेनर को घुमाना है।

.gallery {
  transform-style: preserve-3d;
  --_t: perspective(280px) rotateX(-90deg);
  animation: r 12s cubic-bezier(.5, -0.2, .5, 1.2) infinite;
}
@keyframes r {
  0%, 3% {transform: var(--_t) rotate(0deg); }
  @for $i from 1 to $n {
    #{($i/$n)*100 - 2}%, 
    #{($i/$n)*100 + 3}% {
      transform: var(--_t) rotate(#{($i / $n) * -360}deg);
    }  
  }
  98%, 100% { transform: var(--_t) rotate(-360deg); }
}

उस कोड को समझना मुश्किल हो सकता है, तो चलिए वास्तव में एक पल पीछे चलते हैं और उस एनीमेशन पर दोबारा गौर करते हैं जिसे हमने सर्कुलर स्लाइडर के लिए बनाया था। हमने उस पहले लेख में यही लिखा है:

.gallery {
  animation: m 12s cubic-bezier(.5, -0.2, .5, 1.2) infinite;
}
@keyframes m {
  0%, 3% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100 - 2}%,
    #{($i / $n) * 100 + 3}% { 
      transform: rotate(#{($i / $n) * -360}deg);
    }  
  }
  98%, 100% { transform: rotate(-360deg); }
}

कीफ़्रेम लगभग समान हैं। हमारे पास समान प्रतिशत मान, समान लूप और समान घुमाव हैं।

दोनों एक जैसे क्यों हैं? क्योंकि उनका तर्क एक ही है। दोनों ही मामलों में, छवियों को एक गोलाकार आकार के चारों ओर व्यवस्थित किया जाता है और हमें प्रत्येक छवि को दिखाने के लिए पूरी चीज़ को घुमाने की आवश्यकता होती है। इसी तरह मैं सर्कुलर स्लाइडर से कीफ़्रेम कॉपी करने में सक्षम था और उसी कोड का उपयोग हमारे 3डी स्लाइडर के लिए कर पाया। फर्क सिर्फ इतना है कि हमें कंटेनर को घुमाने की जरूरत है -90deg छवियों को देखने के लिए एक्स-अक्ष के साथ क्योंकि हम उन्हें पहले ही घुमा चुके हैं 90deg एक ही धुरी पर। फिर हम का स्पर्श जोड़ते हैं perspective 3D प्रभाव प्राप्त करने के लिए।

इतना ही! हमारा स्लाइडर हो गया है। यहाँ फिर से पूरा डेमो है। आपको बस इतना करना है कि आप जितनी चाहें उतनी छवियां जोड़ें और इसे चालू रखने के लिए एक चर को अपडेट करें।

कार्यक्षेत्र 3 डी स्लाइडर

चूँकि हम 3D स्पेस में खेल रहे हैं, तो पिछले स्लाइडर का वर्टिकल वर्शन क्यों नहीं बनाते? अंतिम वाला z- अक्ष के साथ घूमता है, लेकिन हम चाहें तो x- अक्ष के साथ भी घूम सकते हैं।

यदि आप इस स्लाइडर के दोनों संस्करणों के लिए कोड की तुलना करते हैं, तो हो सकता है कि आपको तुरंत अंतर न मिले क्योंकि यह केवल एक वर्ण है! मैंने बदल दिया rotate() साथ में rotateX() keyframes और छवि के अंदर transform। बस!

इस बात पर ध्यान दिया जाना चाहिए कि rotate() के बराबर है rotateZ(), इसलिए अक्ष को बदलकर Z सेवा मेरे X हम स्लाइडर को क्षैतिज संस्करण से लंबवत में बदलते हैं।

घन स्लाइडर

हम बिना CSS में 3D के बारे में बात नहीं कर सकते क्यूब्स के बारे में बात कर रहे हैं. और हां, इसका मतलब है कि हम स्लाइडर का दूसरा संस्करण बनाने जा रहे हैं।

स्लाइडर के इस संस्करण के पीछे का विचार छवियों के साथ एक वास्तविक घन आकार बनाना है और पूरी चीज़ को अलग-अलग अक्ष के चारों ओर घुमाना है। चूंकि यह एक घन है, हम छह चेहरों के साथ काम कर रहे हैं। हम छह छवियों का उपयोग करेंगे, घन के प्रत्येक चेहरे के लिए एक। तो, कोई सास नहीं लेकिन वापस वेनिला सीएसएस पर।

वह एनीमेशन थोड़ा जबरदस्त है, है ना? आप भी कहाँ से शुरू करते हैं?

हमारे छह चेहरे हैं, इसलिए हमें कम से कम छह घुमाव करने की आवश्यकता है ताकि प्रत्येक छवि को एक मोड़ मिले। ठीक है, वास्तव में, हमें पाँच घुमावों की आवश्यकता है - अंतिम हमें पहले छवि चेहरे पर वापस लाता है। यदि आप एक रूबिक क्यूब — या कोई अन्य घन के आकार की वस्तु जैसे पासा — लेते हैं और इसे अपने हाथ से घुमाते हैं, तो आपको एक अच्छा विचार होगा कि हम क्या कर रहे हैं।

.gallery {
  --s: 250px; /* the size */

  transform-style: preserve-3d;
  --_p: perspective(calc(2.5*var(--s)));
  animation: r 9s infinite cubic-bezier(.5, -0.5, .5, 1.5);
}

@keyframes r {
  0%, 3%   { transform: var(--_p); }
  14%, 19% { transform: var(--_p) rotateX(90deg); }
  31%, 36% { transform: var(--_p) rotateX(90deg) rotateZ(90deg); }
  47%, 52% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
  64%, 69% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg); }
  81%, 86% { transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg); }
  97%, 100%{ transform: var(--_p) rotateX(90deg) rotateZ(90deg) rotateY(-90deg) rotateX(90deg) rotateZ(90deg) rotateY(-90deg); }
}

RSI transform संपत्ति शून्य रोटेशन के साथ शुरू होती है और, प्रत्येक राज्य पर, हम एक विशिष्ट अक्ष पर एक नया रोटेशन जोड़ते हैं जब तक कि हम छह रोटेशन तक नहीं पहुंच जाते। फिर हम पहली छवि पर वापस आ गए हैं।

आइए हमारी छवियों के प्लेसमेंट को न भूलें। हर एक का उपयोग करके क्यूब के चेहरे पर लगाया जाता है transform:

.gallery img {
  grid-area: 1 / 1;
  width: var(--s);
  aspect-ratio: 1;
  object-fit: cover;
  transform: var(--_t,) translateZ(calc(var(--s) / 2));
}
.gallery img:nth-child(2) { --_t: rotateX(-90deg); }
.gallery img:nth-child(3) { --_t: rotateY( 90deg) rotate(-90deg); }
.gallery img:nth-child(4) { --_t: rotateX(180deg) rotate( 90deg); }
.gallery img:nth-child(5) { --_t: rotateX( 90deg) rotate( 90deg); }
.gallery img:nth-child(6) { --_t: rotateY(-90deg); }

आप शायद सोच रहे हैं कि मेरे द्वारा उपयोग किए जा रहे मूल्यों के पीछे अजीब जटिल तर्क है, है ना? अच्छा नहीं। मैंने केवल इतना किया कि DevTools खोल दिया और प्रत्येक छवि के लिए अलग-अलग रोटेशन मानों के साथ खेलता रहा जब तक कि मैं इसे सही नहीं कर पाया। यह बेवकूफी भरा लग सकता है लेकिन, हे, यह काम करता है - खासकर जब से हमारे पास छवियों की एक निश्चित संख्या है और हम किसी ऐसी चीज की तलाश नहीं कर रहे हैं जो समर्थन करती हो N इमेजिस।

वास्तव में, मैं जिन मूल्यों का उपयोग कर रहा हूं उन्हें भूल जाइए और एक अभ्यास के रूप में स्वयं प्लेसमेंट करने का प्रयास करें। एक दूसरे के ऊपर खड़ी सभी छवियों के साथ शुरू करें, DevTools खोलें और आगे बढ़ें! आप शायद अलग कोड के साथ समाप्त हो जाएंगे और यह बिल्कुल ठीक है। छवियों को स्थापित करने के विभिन्न तरीके हो सकते हैं।

अंदर अल्पविराम के साथ क्या चाल है var()? क्या यह एक टाइपो है?

यह कोई टाइपो नहीं है इसलिए इसे न हटाएं! यदि आप इसे हटाते हैं, तो आप देखेंगे कि यह पहली छवि के स्थान को प्रभावित करता है। आप देख सकते हैं कि मेरे कोड में मैंने परिभाषित किया है --_t पहले वाले को छोड़कर सभी छवियों के लिए क्योंकि मुझे इसके लिए केवल अनुवाद की आवश्यकता है। वह अल्पविराम चर को वापस शून्य मान पर गिरा देता है। अल्पविराम के बिना, हमारे पास फ़ॉलबैक नहीं होगा और संपूर्ण मान अमान्य होगा।

से विशेष विवरण:

नोट: यानी, var(--a,) एक वैध कार्य है, यह निर्दिष्ट करता है कि यदि --a कस्टम गुण अमान्य या अनुपलब्ध है, the var()' को कुछ नहीं से बदला जाना चाहिए।

रैंडम क्यूब स्लाइडर

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

बिल्कुल सटीक? मैं तुम्हारे बारे में नहीं जानता, लेकिन मुझे यह संस्करण बेहतर पसंद है! यह अधिक दिलचस्प है और बदलाव देखना संतोषजनक है। और क्या? आप अपना खुद का रैंडम क्यूब स्लाइडर बनाने के लिए मूल्यों के साथ खेल सकते हैं!

तर्क वास्तविक है बिल्कुल यादृच्छिक नहीं है - यह बस ऐसा ही प्रतीत होता है। आप एक परिभाषित करते हैं transform प्रत्येक मुख्य-फ़्रेम पर जो आपको एक चेहरा दिखाने की अनुमति देता है और... ठीक है, वास्तव में यही है! आप अपनी इच्छानुसार कोई भी ऑर्डर चुन सकते हैं।

@keyframes r {
  0%, 3%   { transform: var(--_p) rotate3d( 0, 0, 0,  0deg); }
  14%,19%  { transform: var(--_p) rotate3d(-1, 1, 0,180deg); }
  31%,36%  { transform: var(--_p) rotate3d( 0,-1, 0, 90deg); }
  47%,52%  { transform: var(--_p) rotate3d( 1, 0, 0, 90deg); }
  64%,69%  { transform: var(--_p) rotate3d( 1, 0, 0,-90deg); }
  81%,86%  { transform: var(--_p) rotate3d( 0, 1, 0, 90deg); }
  97%,100% { transform: var(--_p) rotate3d( 0, 0, 0,  0deg); }
}

मै इस्तेमाल कर रहा हूँ rotate3d() इस बार लेकिन मैं अभी भी उन मूल्यों को खोजने के लिए DevTools पर भरोसा कर रहा हूं जो मुझे "सही" लगते हैं। मुख्य-फ़्रेम के बीच कोई संबंध खोजने का प्रयास न करें क्योंकि ऐसा कोई नहीं है. मैं अलग-अलग परिवर्तनों को परिभाषित कर रहा हूं और फिर "यादृच्छिक" परिणाम देख रहा हूं। सुनिश्चित करें कि पहली छवि क्रमशः पहला और अंतिम फ्रेम है, और प्रत्येक अन्य फ्रेम पर एक अलग छवि दिखाएं।

आप ए का उपयोग करने के लिए बाध्य नहीं हैं rotate3d() जैसा मैंने किया था वैसा ही रूपांतरित करें। आप अलग-अलग घुमावों की श्रृंखला भी बना सकते हैं जैसे हमने पिछले उदाहरण में किया था। चारों ओर खेलें और देखें कि आप किसके साथ आ सकते हैं! मैं आपके द्वारा टिप्पणी अनुभाग में मेरे साथ अपना संस्करण साझा करने की प्रतीक्षा कर रहा हूँ!

ऊपर लपेटकर

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

और हमने यह सब अपने द्वारा बनाए गए प्रत्येक स्लाइडर के लिए ठीक उसी HTML के साथ किया। कितना मजेदार था वो? CSS बहुत शक्तिशाली है और जावास्क्रिप्ट की सहायता के बिना बहुत कुछ पूरा करने में सक्षम है।