👧🏾 🥙 🌡️ सीएसएस और जावास्क्रिप्ट चींटी हिंडोला 🤢 👀 🔰

CSS3 के आगमन के साथ, जेएस पुस्तकालयों का उपयोग किए बिना एनिमेशन बनाना संभव हो गया, जैसे कि, उदाहरण के लिए, jQuery। CSS3 संक्रमण संपत्ति आपको एक तत्व (चौड़ाई, ऊंचाई, मार्जिन, अस्पष्टता, आदि) के अन्य गुणों को आसानी से बदलने की अनुमति देती है, मापदंडों के रूप में परिवर्तन का समय और कानून निर्धारित करती है। मैं शुद्ध जावास्क्रिप्ट में एक छोटा, लेकिन काफी कार्यात्मक हिंडोला प्रदान करता हूं। चींटी के समान छोटा, जो उल्लू से बहुत छोटा होता है। लेकिन लगभग समान क्षमताओं के साथ।

चींटी-हिंडोला आपको अनुमति देता है:

एक या अधिक तत्व दिखाएं;
तत्वों को एक परिमित या अनंत रिबन (एक लूप में) के रूप में दिखाया जा सकता है;
ऑटो-स्क्रॉल आइटम;
नेविगेशन तीर, संकेतक बिंदु या स्पर्श स्क्रीन के लिए किया जाता है;
स्वचालित रूप से किसी भी स्क्रीन चौड़ाई को समायोजित करता है।

हम अपने हिंडोला को index.html फ़ाइल में रखते हैं (नीचे उदाहरण फ़ाइल देखें):

एचटीएमएल

<div class="ant-carousel"> <div class="ant-carousel-hider"> <ul class="ant-carousel-list"> <li class="ant-carousel-element"><img src="images/img1.jpg" alt="1"> <p> 1</p> </li> <li class="ant-carousel-element"><img src=" images /img2.jpg" alt="2"> <p>2</p> </li> … <li class="ant-carousel-element"><img src=" images /imgN.jpg" alt="N"> <p> N</p> </li> </ul> </div> <div class="ant-carousel-arrow-left"></div><div class="ant-carousel-arrow-right"></div> <div class="ant-carousel-dots"></div> </div>

यहां <ul> <li> तत्वों का उपयोग किया जाता है, लेकिन यदि आप चाहें तो <div> <div> का उपयोग किया जा सकता है। तीर और सूचक बिंदु संबंधित कंटेनरों में बिल्कुल स्थित हैं। तीर के लिए, त्रिकोणीय कोष्ठक के रूप में पैटर्न का उपयोग किया जाता है, जो यदि वांछित है, तो आप अपने पैटर्न या छवि पीढ़ी को छद्म तत्वों के साथ बदल सकते हैं : पहले और बाद में ।

तीन दृश्य तत्वों और 270 पिक्सेल की एक तत्व चौड़ाई के साथ एक हिंडोला बनाएं। तब अधिकतम हिंडोला चौड़ाई 810 पिक्सल है। हम CSS फ़ाइल को शामिल करते हैं:

सीएसएस

 .ant-carousel { max-width: 810px; /*     */ position: relative; } .ant-carousel-hider { overflow: hidden; } .ant-carousel-list { width: auto; margin: 0; padding: 0; list-style-type: none; display: flex; justify-content: flex-start; } .ant-carousel-element { display: block; flex: 0 0 auto; width: 270px; /*     */ text-align: center; /*     */ } /* Navigation item styles */ div.ant-carousel-arrow-left, div.ant-carousel-arrow-right { width: 22px; height: 40px; position: absolute; cursor: pointer; opacity: 0.6; z-index: 2; display: block; } div.ant-carousel-arrow-left { left: -40px; top: 40%; background: url(“ant-arrow-left.png”) no-repeat; } div.ant-carousel-arrow-right { right: -40px; top: 40%; background: url(“ant-arrow-right.png”) no-repeat; } div.ant-carousel-arrow-left: hover { opacity: 1.0; } div.ant-carousel-arrow-right: hover { opacity: 1.0; } div.ant-carousel-dots { width: 100%; height: auto; position: absolute; left: 0; bottom: -30px; z-index: 2; text-align: center; } span.ant-dot { width: 10px; height: 10px; margin: 5px 7px; padding: 0; display: inline-block; background-color: #BBB; border-radius: 5px; cursor: pointer; }

हम तत्वों को एंटी-कैरोसेल-लिस्ट कंटेनर में रखते हैं, डिस्प्ले सेट करते हैं: इसके लिए फ्लेक्स प्रॉपर्टी और सभी तत्वों को जस्टिफाई-कंटेंट के बाएं किनारे पर दबाएं : फ्लेक्स-स्टार्ट । फ्लेक्स प्रॉपर्टी : 0 0 ऑटो फ्लेक्स-सिकुड़ कर 0 पर सेट हो जाता है (डिफ़ॉल्ट 1 है)। हिंडोला तत्वों के स्क्रॉलिंग को पारगमन संपत्ति का उपयोग करके सुचारू रूप से मार्जिन-लेफ्ट इंडेंट को तत्व की चौड़ाई (एक ही रास्ता) या तत्व की चौड़ाई से शून्य (दूसरा तरीका) में बदलकर किया जाता है। परिवर्तन (स्क्रॉल) फ़ंक्शन के लिए, आसानी के मूल्य का उपयोग किया जाता है ।

हम कार्यक्रम में जाते हैं। कार्यक्रम के विकल्पों में आप कॉन्फ़िगर कर सकते हैं:

दृश्य तत्वों की संख्या;
पहले से आखिरी या एक अनंत लूप में टेप के रूप में तत्वों को देखना (टेप एक रिंग में बंद हो जाता है);
तत्वों का स्वचालित या मैन्युअल स्क्रॉलिंग;
ऑटो स्क्रॉल अंतराल;
एनीमेशन गति;
नेविगेशन तत्वों को सक्षम / अक्षम करें: तीर, संकेतक बिंदु, स्पर्श द्वारा फ़्लिप (स्पर्श स्क्रीन के लिए)।

कार्यक्रम का प्रारंभ इस तथ्य से शुरू होता है कि हिंडोला तत्वों की संख्या निर्धारित की जाती है, प्रारंभिक मान आंतरिक चर को सौंपा जाता है, घटना संचालकों को तीर और बिंदुओं (यदि जुड़ा हुआ है) को सौंपा जाता है। यदि स्वचालित स्क्रॉलिंग विकल्प सक्षम है, तो अतिरिक्त हैंडलर असाइन किए जाते हैं, जब आप हिंडोला तत्वों पर माउस ले जाते हैं तो स्क्रॉल करना बंद कर देते हैं। टच स्क्रॉलिंग को ट्रिगर किया जाता है अगर उस बिंदु के बीच 20 से अधिक पिक्सेल होते हैं जहां उंगली स्क्रीन को छूती है और बिंदु स्क्रीन को फाड़ दिया जाता है और कुल मिलाकर उंगली स्क्रीन को छूने पर 80 एमएस से कम होती है। लेखक को इस हिंडोला के साथ अभी तक बहुत अनुभव नहीं है, इसलिए, दिए गए मूल्यों को स्पष्टीकरण की आवश्यकता हो सकती है। स्क्रॉल हैंडलर के अधिक विश्वसनीय संचालन के लिए, अंकों के बीच की दूरी को 10 या 15 पिक्सेल तक कम किया जा सकता है, और स्पर्श समय को 100 या 120 एमएस तक बढ़ाया जाना चाहिए। इस हिंडोला का उपयोगकर्ता इसके उपयोग में कुछ अनुभव प्राप्त करने के बाद इन मूल्यों को स्वयं ठीक कर सकता है।

तत्वों के लिए स्क्रॉल एल्गोरिथ्म इस बात पर निर्भर करता है कि लूप विकल्प सक्षम है या नहीं। यदि सक्षम किया जाता है, तो दाईं ओर ( एलेम्प्रव फ़ंक्शन) पर स्क्रॉल करते समय, इस .rslList तत्वों की पूरी लाइन की मार्जिन-लेफ्ट गुण शून्य से घटकर एक प्रभावी मान के बराबर हो जाती है, जो एलिमीडिथ तत्व की चौड़ाई के बराबर है। उसी समय, दाईं ओर अंतिम तत्व को पहले तत्व से पहले क्लोन और डाला जाता है, जिसके बाद अंतिम तत्व हटा दिया जाता है। लाइन को गुण 'संक्रमण: मार्जिन' + options.speed + 'ms आसानी' असाइन किया गया है, जहाँ options.speed एनीमेशन गति है, आसानी एनीमेशन फ़ंक्शन है। अब आप स्क्रॉल कर सकते हैं। मार्जिन-बाईं संपत्ति सुचारू रूप से एक नकारात्मक मूल्य से शून्य में बदल जाती है, संपूर्ण शासक आसानी से दाईं ओर शिफ्ट हो जाता है, और अंतिम आइटम पहले आता है। ऑप्शंस.स्पेड माइक्रोसेकंड के बाद, लाइन को पिछले मूल्य 'ट्रांज़िशन: कोई नहीं' दिया जाता है ।

 var elm, buf, this$ = this; elm = this.crslList.lastElementChild; buf = elm.cloneNode(true); this.crslList.insertBefore(buf, this.crslList.firstElementChild); this.crslList.removeChild(elm); this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; window.getComputedStyle(this.crslList). marginLeft; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '0px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;' }, this.options.speed);

यदि आपको एक ही समय में n तत्वों को स्क्रॉल करने की आवश्यकता है, तो तत्वों की क्रमबद्धता एक लूप n समय में की जाती है, और मार्जिन-बाईं दूरी n बार बढ़ जाती है।

बाईं ओर स्क्रॉल करना ( elemNext फ़ंक्शन) रिवर्स ऑर्डर में होता है। सबसे पहले, 'संक्रमण: मार्जिन' + options.speed + 'ms आसानी' संपत्ति को इस. crslList लाइन को सौंपा गया है और शासक सुचारू रूप से बाईं ओर स्क्रॉल करता है ( crslList.style.marginLeft = - '+ elemWidth +' px ' )। इसके अलावा, विकल्प के बाद । माइक्रोसेकंड के बाद, पहले तत्व को क्लोन किया जाता है और शासक के अंत में डाला जाता है, जिसके बाद पहला तत्व हटा दिया जाता है। शासक मूल्य 'संक्रमण: कोई नहीं' लौटाता है। यदि आपको एक ही समय में n तत्वों को स्क्रॉल करने की आवश्यकता है, तो तत्वों का पुनर्व्यवस्थापन, जैसा कि पिछले मामले में, एक पाश में n बार किया जाता है और मार्जिन-बाएं दूरी n बार बढ़ जाती है।

 var elm, buf, this$ = this; this.crslList.style.cssText = 'transition: margin '+this.options.speed+'ms ease;'; this.crslList.style.marginLeft = '-' + this.elemWidth + 'px'; setTimeout(function() { this$.crslList.style.cssText = 'transition: none;'; elm = this$.crslList.firstElementChild; buf = elm.cloneNode(true); this$.crslList.appendChild(buf); this$.crslList.removeChild(elm) this$.crslList.style.marginLeft = '0px' }, this.options.speed);

यदि चक्र विकल्प अक्षम है, तो इस मामले में तत्वों की कोई क्रमपरिवर्तन नहीं है, और तत्वों की पूरी पंक्ति को अपने चरम बिंदुओं के लिए पूरे बाएं या दाएं के रूप में स्थानांतरित किया जाता है। तत्वों की यह लाइन। क्रॉसलिस्ट की संपत्ति 'संक्रमण: मार्जिन' + विकल्प.स्पीड + 'एमएस सहजता' को तब भी असाइन किया जाता है, जब हिंडोला को इनिशियलाइज़ किया जाता है और अब हटाया नहीं जाता है।

हिंडोला को चींटी-हिंडोला वर्ग के नाम से या पहचानकर्ता द्वारा बुलाया जाता है। दूसरे मामले में, आप एक पृष्ठ पर कई हिंडोला रख सकते हैं। एक हिंडोला index.html फ़ाइल इस तरह दिख सकती है:

 <!DOCTYPE html> <html lang="ru"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width; initial-scale=1.0"> <title>Ant-Carousel</title> <!--   --> <link rel="stylesheet" type="text/css" href="ant-files/ant-carousel-styles.css"> </head> <body> … <div class="ant-carousel"> <!--    --> … </div> … <footer> … </footer> <!--   --> <script src="ant-files/ant-carousel. js"></script> <!--   --> <script>new Ant()</script> </body> </html>

एक पृष्ठ पर कई हिंडोला रखने के लिए, आपको उन्हें आईडी से कॉल करने की आवश्यकता है। विभिन्न हिंडोला तत्वों की एक अलग संख्या हो सकती है।

 <div class="ant-carousel" id=”first”> <!--   --> … <div class="ant-carousel" id=”second”> <!--   --> … <script>new Ant("first"); new Ant("second");</script>

सभी चित्र खुले स्रोतों से लिए गए हैं।

आपका ध्यान के लिए धन्यवाद!

सीएसएस और जावास्क्रिप्ट चींटी हिंडोला

More articles: