सीएसएस अनंत और परिपत्र घूर्णन छवि स्लाइडर

छवि स्लाइडर्स (जिन्हें हिंडोला भी कहा जाता है) हर जगह हैं। वहाँ हैं सामान्य स्लाइडर बनाने के लिए ढेर सारी CSS ट्रिक्स जहां छवियां बाएं से दाएं (या विपरीत) स्लाइड करती हैं। यह एक ही सौदा है वहाँ कई जावास्क्रिप्ट पुस्तकालय हैं जो जटिल एनिमेशन के साथ फैंसी स्लाइडर्स बनाते हैं। हम इस पोस्ट में ऐसा कुछ भी नहीं करने जा रहे हैं।

लेखों की एक छोटी सी श्रृंखला के माध्यम से, हम कुछ फैंसी और असामान्य CSS-only स्लाइडर्स का पता लगाने जा रहे हैं। यदि आप वही ओल 'क्लासिक स्लाइडर्स देखकर थक गए हैं, तो आप सही जगह पर हैं!

इस पहले लेख के लिए, हम "परिपत्र घूर्णन छवि स्लाइडर" नामक किसी चीज़ से शुरू करेंगे:

बिल्कुल सटीक? आइए कोड को अलग करें!

एचटीएमएल मार्कअप

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

एस और अन्य सामान।

यहां भी यही नियम लागू होता है - हमारा कोड और कुछ नहीं बल्कि एक कंटेनर में छवियों की एक सूची है।

मान लीजिए कि हम चार छवियों के साथ काम कर रहे हैं:

इतना ही! अब चलिए कोड के दिलचस्प हिस्से पर चलते हैं। लेकिन सबसे पहले, हम इसके तर्क को समझने के लिए गोता लगाने जा रहे हैं कि हमारा स्लाइडर कैसे काम करता है।

यह कैसे काम करता है?

यहां एक वीडियो है जहां मैं हटा देता हूं overflow: hidden CSS से ताकि हम बेहतर ढंग से समझ सकें कि चित्र कैसे चल रहे हैं:

यह ऐसा है जैसे हमारी चार छवियों को एक बड़े वृत्त पर रखा गया है जो वामावर्त घूमता है।

सभी छवियों का आकार समान है (द्वारा दर्शाया गया है S चित्र में)। नीले वृत्त पर ध्यान दें जो कि वह वृत्त है जो सभी छवियों के केंद्र के साथ प्रतिच्छेद करता है और एक त्रिज्या है (R). हमें अपने एनीमेशन के लिए बाद में इस मान की आवश्यकता होगी। R के बराबर है 0.707 * S. (मैं उस ज्यामिति को छोड़ने जा रहा हूँ जो हमें वह समीकरण देती है।)

चलिए कुछ CSS लिखते हैं!

हम उपयोग करेंगे सीएसएस ग्रिड एक ही क्षेत्र में सभी छवियों को एक दूसरे के ऊपर रखने के लिए:

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

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* we will see the utility of this later */
  border-radius: 50%;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

अभी तक कुछ भी जटिल नहीं है। पेचीदा हिस्सा एनीमेशन है।

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

.gallery > img {
  /* same as before */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

मुख्य चाल उस हाइलाइट की गई रेखा पर निर्भर करती है। डिफ़ॉल्ट रूप से, CSS transform-origin संपत्ति के बराबर है center (या 50% 50%) जो छवि को उसके केंद्र के चारों ओर घुमाता है, लेकिन हमें ऐसा करने की आवश्यकता नहीं है। हमें छवि के केंद्र के चारों ओर घूमने की आवश्यकता है दीर्घ वृत्ताकार जिसमें हमारी छवियां शामिल हैं इसलिए के लिए नया मूल्य transform-origin.

चूंकि आर के बराबर है 0.707 * S, हम कह सकते हैं कि R के बराबर है 70.7% छवि के आकार का। यहाँ यह दर्शाने के लिए एक चित्र दिया गया है कि हमें यह कैसे मिला 120.7% मूल्य:

आइए एनीमेशन चलाएं और देखें कि क्या होता है:

मैं जानता हूँ मुझे पता है। परिणाम हम जो चाहते हैं उससे दूर है, लेकिन वास्तव में हम बहुत करीब हैं। ऐसा लग सकता है कि वहां केवल एक छवि है, लेकिन यह न भूलें कि हमने सभी छवियों को एक दूसरे के ऊपर ढेर कर दिया है। वे सभी एक ही समय में घूम रहे हैं और केवल शीर्ष छवि दिखाई दे रही है। इस ओवरलैप से बचने के लिए हमें प्रत्येक छवि के एनीमेशन में देरी करने की आवश्यकता है।

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

हालात पहले से बेहतर हो रहे हैं!

यदि हम कंटेनर पर अतिप्रवाह को छिपाते हैं तो हम पहले से ही एक स्लाइडर देख सकते हैं, लेकिन हम एनीमेशन को थोड़ा अपडेट करेंगे ताकि प्रत्येक छवि आगे बढ़ने से पहले एक छोटी अवधि के लिए दिखाई दे।

ऐसा करने के लिए हम अपने एनिमेशन कीफ़्रेम को अपडेट करने जा रहे हैं:

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

प्रत्येक के लिए 90deg (360deg/4, जहां 4 छवियों की संख्या है) हम एक छोटा विराम जोड़ेंगे। प्रत्येक छवि के लिए दृश्यमान रहेगा 5% इससे पहले कि हम अगले एक पर स्लाइड करें कुल अवधि का (27%-22%, 52%-47%, आदि।)। मैं अपडेट करने जा रहा हूं animation-timing-function एक का उपयोग cubic-bezier() एनीमेशन को थोड़ा कट्टर बनाने के लिए कार्य करें:

अब हमारा स्लाइडर एकदम सही है! ठीक है, लगभग सही है क्योंकि हम अभी भी अंतिम स्पर्श को याद कर रहे हैं: रंगीन गोलाकार सीमा जो हमारी छवियों के चारों ओर घूमती है। हम पर छद्म तत्व का उपयोग कर सकते हैं .gallery इसे बनाने के लिए रैपर:

.gallery {
  padding: calc(var(--s) / 20); /* the padding is needed here */
  position: relative;
}
.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit; /* Inherits the same padding */
  border-radius: 50%;
  background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.gallery::after,
.gallery >img {
  animation: m 8s infinite cubic-bezier(.5, -0.2, .5, 1.2);
}

मैंने एक के साथ एक मंडली बनाई है आवर्ती शंकु प्रवणता पृष्ठभूमि के लिए एक का उपयोग करते समय मास्किंग ट्रिक यह केवल गद्देदार क्षेत्र दिखाता है। फिर मैं इसे उसी एनीमेशन पर लागू करता हूं जिसे हमने छवियों के लिए परिभाषित किया था।

हमने कर लिया! हमारे पास एक अच्छा सर्कुलर स्लाइडर है:

आइए और छवियां जोड़ें

चार छवियों के साथ काम करना अच्छा है, लेकिन यह बेहतर होगा कि हम इसे किसी भी संख्या में छवियों पर स्केल कर सकें। आखिरकार, यह एक इमेज स्लाइडर का उद्देश्य है। हमें विचार करने में सक्षम होना चाहिए N इमेजिस।

इसके लिए हम Sass की शुरुआत करके कोड को और अधिक सामान्य बनाने जा रहे हैं। सबसे पहले, हम छवियों की संख्या के लिए एक चर परिभाषित करते हैं ($n) और हम हर उस हिस्से को अपडेट करेंगे जहां हमने छवियों की संख्या को हार्ड-कोड किया है (4).

आइए देरी से शुरू करें:

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

विलंब का सूत्र है (1 - $i)*duration/$n, जो हमें निम्नलिखित सैस लूप देता है:

@for $i from 2 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    animation-delay: calc(#{(1 - $i) / $n} * 8s);
  }
}

यदि हम वास्तव में चाहते हैं तो हम अवधि को एक चर भी बना सकते हैं। लेकिन चलिए एनीमेशन पर चलते हैं:

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% {transform: rotate(-360deg); }
}

आइए पैटर्न के बारे में बेहतर जानकारी प्राप्त करने के लिए इसे सरल करें:

@keyframes m {
  0% { transform: rotate(0); }
  25% { transform: rotate(-90deg); }
  50% { transform: rotate(-180deg); }
  75% { transform: rotate(-270deg); }
  100% { transform: rotate(-360deg); }
}

प्रत्येक राज्य के बीच कदम के बराबर है 25% - जो है 100%/4 - और हम एक जोड़ते हैं -90deg कोण - जो है -360deg/4. इसका मतलब है कि हम अपने लूप को इसके बजाय इस तरह लिख सकते हैं:

@keyframes m {
  0% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100}% { transform: rotate(#{($i / $n) * -360}deg); }  
  }
  100% { transform: rotate(-360deg); }
}

चूंकि प्रत्येक छवि लेता है 5% एनीमेशन में, हम इसे बदलते हैं:

#{($i / $n) * 100}%

…इसके साथ ही:

#{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}%

इस बात पर ध्यान दिया जाना चाहिए कि 5% एक मनमाना मूल्य है जिसे मैंने इस उदाहरण के लिए चुना है। हम इसे नियंत्रित करने के लिए एक चर भी बना सकते हैं कि प्रत्येक छवि कितने समय तक दिखाई दे। मैं इसे सरलता के लिए छोड़ने जा रहा हूं, लेकिन गृहकार्य के लिए, आप इसे करने का प्रयास कर सकते हैं और टिप्पणियों में अपना कार्यान्वयन साझा कर सकते हैं!

@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); }
}

अंतिम बिट अपडेट करना है transform-origin. हमें कुछ ज्यामिति ट्रिक्स की आवश्यकता होगी। छवियों की संख्या जो भी हो, विन्यास हमेशा समान रहता है। हमारे पास एक बड़े वृत्त के अंदर हमारी छवियां (छोटे वृत्त) हैं और हमें त्रिज्या का मान ज्ञात करने की आवश्यकता है, R.

आप शायद एक उबाऊ ज्यामिति स्पष्टीकरण नहीं चाहते हैं तो यहां बताया गया है कि हम कैसे पाते हैं R:

R = S / (2 * sin(180deg / N))

यदि हम इसे प्रतिशत के रूप में व्यक्त करते हैं, तो यह हमें देता है:

R = 100% / (2 * sin(180deg / N)) = 50% / sin(180deg / N)

…जिसका अर्थ है transform-origin मान बराबर है:

transform-origin: 50% (50% / math.sin(180deg / $n) + 50%);

हमारा काम हो गया! हमारे पास एक स्लाइडर है जो किसी भी संख्या छवियों के साथ काम करता है!

आइए वहां नौ छवियों को टॉस करें:

जितनी चाहें उतनी छवियां जोड़ें और अपडेट करें $n छवियों की कुल संख्या के साथ चर।

ऊपर लपेटकर

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