Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

एक jQuery इमेज स्क्रॉलर का निर्माण

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

इस ट्यूटोरियल में, हम एक इमेज स्क्रोलर बनाने जा रहे हैं, जो jQuery की उत्कृष्ट एनीमेशन फीचर्स का उपयोग कर रहा है और कोड के साथ कुछ मज़ा ले। इमेज स्क्रॉलर निश्चित रूप से नया नहीं हैं; उनके वर्जन हर समय बाहर आते रहते हैं। उनमें से कई हालांकि यूजर द्वारा शुरू किए गए हैं; जिसका अर्थ है कि वर्तमान में डिस्प्ले किये गए कंटेंट को बदलने के लिए, विज़िटर को एक बटन क्लिक करना होगा या कुछ अन्य एक्शन करने होंगे। यह स्क्रोलर अलग होगा कि यह पूरी तरह से स्वायत्त (autonomous) होगा और पेज लोड होने के बाद स्क्रॉल करना शुरू कर देगा।


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


शुरू करना

आइए पहले अंतर्निहित HTML पेज बनाएं; अपने टेक्स्ट एडिटर में एक नए पेज में निम्न कोड जोड़ें:

इसे एक नए फ़ोल्डर के अंदर imageScroller.html के रूप में सेव करें। हम पेज के हेड में एक कस्टम स्टाइलशीट से लिंक करते हैं, जिसे हम थोड़ी देर में कोड करेंगे, और हम पेज के निचले हिस्से में jQuery की नवीनतम रिलीज़ के होस्ट किए गए संस्करण के लिए एक लिंक शामिल करते हैं। बॉडी के अंत में स्क्रिप्ट लोड करना आपके पेज के प्रदर्शन में सुधार के लिए एक मान्यता प्राप्त तकनीक है और इसलिए जहां भी संभव हो वहां पर इसी का अभ्यास किया जाना चाहिए।

हमारे विजेट में नेस्टेड कंटेनर की एक श्रृंखला और लिंक में लिपटे इमेजेज का एक समूह शामिल है। कंटेनरों के भीतर रखी गई इमेजेज को पहुंच (accessibility) के कारणों के लिए पेज में हार्डकोड किया गया है। हम इमेजेज को डायनामिक रूप से रिट्रीव नहीं करेंगे; विजेट में रखी गई किसी भी इमेज को आटोमेटिक रूप से स्क्रॉल किया जाएगा (बशर्ते वे उपयुक्त क्लास नाम वाले लिंक में लिपटे हों)।

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

इनर-मोस्ट कंटेनर वह एलिमेंट है जिसका उपयोग इमेजेज को देखने के लिए किया जाएगा। इस एलिमेंट को क्लास js-disabled दिया गया है जिसका प्रयोग उन विज़िटर के लिए पूरी तरह से किया जाएगा जिनके पास जावास्क्रिप्ट डिसएबल है। हम इस क्लास का उपयोग CSS के साथ प्रत्येक इमेज को श्रिंक करने के लिए करेंगे ताकि वे सभी देखने योग्य हों।

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


विजेट को स्टाइल करना

JQuery के लिंक के बाद, हमारे पास jQuery का एक कस्टम स्क्रिप्ट एलिमेंट document.ready शॉर्टकट है, हमारे लिए कोड जोड़ने के लिए प्रतीक्षा करता है जो विजेट को जीवंत करेगा। हालांकि हमारे ऐसा करने से पहले, चलिए बस CSS को जल्दी से जोड़ दें। अपने टेक्स्ट एडिटर में एक और नई फाइल में, निम्नलिखित सिलेक्टर और स्टाइल रूल जोड़ें:

यदि जावास्क्रिप्ट डिसएबल है, और जब पेज लोड हो रहा है, तो सभी इमेजेज देखने योग्य होंगी

इसे वेब पेज के उसी फ़ोल्डर में imageScroller.css के रूप में सेव करें। सबसे पहले हमारे पास क्लास सिलेक्टर है जो हमारे js-disable क्लास को लक्षित करता है; इन नियमों के साथ हम इमेजेज को बस आकार देते हैं ताकि वे विजेट की चौड़ाई के साथ एक दूसरे के बगल में खड़े हो सकें। यदि जावास्क्रिप्ट डिसएबल है, और जब पेज लोड हो रहा है, तो सभी इमेजेज देखने योग्य होंगी - एक बहुत तेज़ और आसान फॉलबैक, लेकिन वह जो अनिवार्य रूप से फूल-प्रूफ नहीं है और निश्चित रूप से प्रगतिशील संवर्धन (Progressive Enhancement) नहीं है। चौड़ाई और ऊंचाई के लिए निर्दिष्ट वैल्यूज को व्यूअर में इमेजेज की संख्या के आधार पर अलग-अलग होना चाहिए।

इसके बाद हमारे पास सिलेक्टर और रूल्स हैं जो विजेट को स्टाइल देते हैं और इसे सही तरीके से कार्य करवाते हैं। यहां के अधिकांश कोड पूरी तरह से डिस्प्ले पर्पस, background-images, colors आदि के लिए है। एक महत्वपूर्ण नियम, जो इम्प्लीमेंट के लिए सही तरीके से कार्य करने पर निर्भर करता है, वो व्यूअर कंटेनर के अंदर overflow: hidden की सेटिंग है। यह उन इमेजेज को छुपाएगा जिन्हें अभी तक दिखाया नहीं गया है और वे इमेजेज जो व्यूअर को पहले ही पास की जा चुकी हैं। इस स्टेज में जब हम पेज को रन करते हैं, तो हमें कुछ ऐसा दिखना चाहिए:

Finished Product

जावास्क्रिप्ट में कुछ CSS हम बस एक पल में सेट करेंगे, और CSS में टारगेट किये गए कुछ एलिमेंट अभी तक मौजूद नहीं हैं, लेकिन यह वो सब कुछ है जिसकी CSS फ़ाइल में जाने से पहले जरूरत है।


विजेट को जीवंत करो

इस ट्यूटोरियल के अंतिम चरण में हम jQuery-flavor वाली जावास्क्रिप्ट जोड़ देंगे जो विजेट को काम कराएगा और जिस व्यवहार को हम चाहते हैं उसे बना देगा। HTML पेज के नीचे खाली एनोनिमस (anonymous) फ़ंक्शन के भीतर निम्न कोड जोड़ें:

सबसे पहले हम व्यूअर कंटेनर से js-disabled क्लास को हटा देते हैं। इसके बाद हम विजेट के भीतर पाए गए सभी इमेजेज को पकड़ने के लिए एक नया कंटेनर बनाते हैं। इसका मुख्य कारण यह है कि प्रत्येक इमेज को अलग से एनिमेट करने की बजाय, जिसके परिणामस्वरूप एक साथ बड़ी संख्या में एनिमेशन एक साथ चल रहे हैं, हमें केवल एक एलिमेंट को एनिमेट करना होगा - वो कंटेनर जिसे हम अभी बना रहे हैं।

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

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

गति पर काम करना आसान है, जितना ट्रेवल किया उसे इसमें लगे समय से भाग करें। उदाहरण के लिए, इस उदाहरण में एनीमेशन की सटीक गति 0.274 पिक्सेल-प्रति-मिलीसेकंड होगी। अंतिम वेरिएबल, direction, एक साधारण स्ट्रिंग है जो यह दर्शाती है कि एनीमेशन दाएं से बाएं आगे बढ़ेगा, हालांकि अगर हम चाहते हैं तो हम इसे आसानी से ltr में बदल सकते हैं।

अंत में, हमने नए कंटेनर की शुरुआती स्थिति निर्धारित करते है; चूंकि एनीमेशन वर्तमान में rtl पर सेट है, हमें नए इमेज कंटेनर को पोजीशन करने की आवश्यकता है ताकि उसका बायां किनारा व्यूअर के दाएं किनारे पर सेट हो। अगर हम एनीमेशन को ltr में सेट करते हैं, तो एलिमेंट का दायां किनारा कंटेनर के बाएं किनारे से अलाइन किया जाएगा। हम जावास्क्रिप्ट टर्नरी कंडीशन (ternary conditional) का उपयोग कर दिशा निर्धारित करते हैं। साथ ही इसकी पोजीशन, हम नए कंटेनर को अपनी दिशा से मेल खाने वाले क्लास का नाम भी देते हैं, जिसे हम स्क्रिप्ट में विभिन्न पॉइंट्स पर टेस्ट कर सकते हैं।

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

एनिमेटर फ़ंक्शन तीन आर्ग्यूमेंट्स स्वीकार करता है; एनिमेट करने के लिए एलिमेंट, उस टाइम की लेंथ जिसे एनीमेशन के लिए चलाना चाहिए, और वो दिशा जहाँ एलिमेंट एनिमेटेड होना चाहिए। फंक्शन को दो अलग-अलग ब्लॉक में विभाजित करें, एक rtl एनीमेशन के लिए और दूसरा ltr के लिए।

कंडीशनल के प्रत्येक ब्लॉक के भीतर हम इमेज कंटेनर की क्लास का नाम अपडेट करते हैं ताकि वर्तमान डायरेक्शन रिफ्लेक्ट हो सकें यदि डायरेक्शन बदल गयी है तो (यह विज़िटर द्वारा शुरू किये गए इंटरेक्शन में से एक है)।

इसके बाद हम एनीमेशन को परिभाषित करते हैं, इमेज कंटेनर को प्लस ltr के लिए या माइनस rtl के लिए करें ताकि यह मूव हो सके, जिससे इसमें व्यूअर में स्लाइड करने का प्रभाव मिलता है। दुर्भाग्यवश हम बिल्ट-इन स्लो, नार्मल, या फ़ास्ट एनिमेशन का प्रयोग नहीं कर सकते, क्योंकि धीमी सेटिंग एनीमेशन को केवल 600 मिलीसेकंड के कुल रन टाइम तक सीमित करती है, जो कि इमेजेज की छोटी संख्या जिनका हम इस उदाहरण में प्रयोग कर रहे हैं के लिए भी बहुत तेज है।

हम स्ट्रिंग लीनियर को एनिमेट मेथड के तीसरे आर्गुमेंट के रूप में स्पेसीफ़ाय करते हैं जो उपयोग करने के लिए easing फंक्शन है और एनीमेशन को एक सामान गति से शुरू से अंत तक आगे बढ़ने के लिए सेट करता है; अगर हमने इसे सेट नहीं किया है, तो एनीमेशन क्रमशः तेज हो जाएगा और एनीमेशन की शुरुआत और अंत में धीमा हो जाएगा।

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

पेज लोड होने पर एनीमेशन शुरू करने के लिए अब हमें उस फ़ंक्शन को कॉल करने की आवश्यकता है जिसे हमने अभी परिभाषित किया है; निम्नलिखित फ़ंक्शन कॉल को जोड़ें:

हम जो भी करते हैं वह एलिमेंट को एनिमेट करने के लिए फंक्शन को कॉल करते हैं जिसे हम पास करते हैं और वे वेरिएबल जिसे हमने कोड के पहले सेक्शन में सेट किया हैं। यदि हम अब पेज को चलाते हैं, तो हमें यह पता चलना चाहिए कि पेज लोड होते ही एनीमेशन शुरू होता है और अनिश्चित काल तक जारी रहता है, जैसा कि निम्न स्क्रीनशॉट में दिखाया गया है (इसी प्रकार से)

Finished Product

कुछ इंटरेक्शन को जोड़ना

अब हम स्टेज पर हैं जहां हमारे पास विजेट की मुख्य फंक्शनलिटी है और अतिरिक्त इंटरएक्टिविटी जोड़ना शुरू कर सकते है जो इसे आकर्षक बना देगा। एनिमेटर फ़ंक्शन पर कॉल करने के बाद निम्न कोड जोड़ें:

जैसा कि कमेंट इंगित करते है, विज़िटर विजेट के भीतर इमेजेज में से किसी एक पर पॉइंटर को घुमाने पर यह ईवेंट हैंडलर एनीमेशन को रोक देगा।

हम एलिमेंट्स को हैंडलर अटैच करने के लिए लाइव jQuery (नया 1.3!) मेथड का उपयोग करते हैं और ईवेंट होने पर एक्सेक्यूट होने के लिए एक एनोनिमस फ़ंक्शन स्पेसीफाई करते हैं।

इस फ़ंक्शन के भीतर हम पहली बार jQuery stop मेथड का उपयोग करके एनीमेशन को रोकते हैं, जो एक true बूलियन वैल्यू में आर्गुमेंट के रूप में पास होता है। यह आर्गुमेंट एनीमेशन की क्यू (queue) को रद्द कर देगा यदि यह मौजूद है; ऐसा नहीं करना चाहिए, क्योंकि किसी भी समय केवल एक एनीमेशन होना चाहिए, लेकिन इस आर्गुमेंट का उपयोग केवल कुछ स्थिति में करना उपयोगी है।

हम जांचते हैं कि कंट्रोल पैनल पहले से मौजूद है या नहीं, बशर्ते कि हम एक नया div एलिमेंट नहीं बनाते, इसे एक id दें ताकि यह हमारे स्टाइल रूल्स को ले सके और इसे बाहरी कंटेनर में जोड़ सके। हम फिर हमारे CSS के साथ विभिन्न ब्राउज़रों को टारगेट करने से बचने के लिए, क्रॉस-ब्राउज़र फैशन में opacity सेट करने के लिए jQuery के CSS मेथड का उपयोग करते हैं, और कंट्रोल्स को नीचे प्लेस करते हैं।

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

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

इसका कारण यह है कि इस बात का कोई अस्पष्टता (ambiguity) नहीं है कि यह $(this) क्या रेफेर करता है। उपर्युक्त कोड का उपयोग करना हमारा काम करता है, लेकिन यह त्रुटियों को फेंकता है, जो कि नॉन-फेटल होने पर, विजेट के संभावित यूज़र्स के लिए आश्वस्त (reassuring) नहीं हैं। वेरिएबल का उपयोग करके यह सुनिश्चित करता है कि इन त्रुटियों से बचा जा सके। कंट्रोल पैनल, जब दिखाई देता है, निम्न स्क्रीनशॉट जैसा दिखाई देता है:

Finished Product

माउसओवर के बाद एनीमेशन बंद कर दिया जाएगा; हम माउसआउट इवेंट हैंडलर का उपयोग करके इसे फिर से शुरू कर सकते हैं, जिसे हमें इसके बाद जोड़ना चाहिए:

फिर हम jQuery की live मेथड का उपयोग करते हैं, लेकिन इस बार, हम रॉ ईवेंट ऑब्जेक्ट को हमारे अनाम (anonymous) कॉलबैक फ़ंक्शन में भी पास करते हैं। हम इस ऑब्जेक्ट का उपयोग सीधे यह देखने के लिए करते हैं कि पॉइंटर कंट्रोल पैनल पर स्थानांतरित हो गया है या नहीं। यदि ऐसा नहीं है, तो हम कंट्रोल्स को छुपाते हैं, लेकिन यदि यह है, तो हम कुछ भी नहीं करते हैं और एनीमेशन को पुनरारंभ करने के साथ आगे बढ़ते हैं। ध्यान दें कि हम एक नेस्टेड टर्नरी का उपयोग कैसे करते हैं जो कि किसी if else कंडीशनल के सामान ही है।

एनोनिमस फ़ंक्शन का मुख्य उद्देश्य एनीमेशन को पुनरारंभ करना है, लेकिन इससे पहले कि हम ऐसा कर सकें, हमें एनीमेशन की अवधि को पूरा करने की आवश्यकता है; हम वैल्यू को हार्डकोड नहीं कर सकते क्योंकि इमेज कंटेनर मूव हो जाएगा। प्रारंभिक दरशन प्रत्येक इमेज के लिए 1 सेकंड पर सेट की गई थी, इस उदाहरण में 5 सेकंड। यदि व्यूअर में केवल एक इमेज दिखती हुई बाकी रह गयी है और हमने एनीमेशन को 5 सेकंड में फिर से सेट किया है, तो एनीमेशन स्पष्ट रूप से धीमा हो जाएगा।

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

यदि एनीमेशन बाएं से दाएं हो रहा है, तो यात्रा के लिए बाईं ओर की दूरी इमेज कंटेनर की बाएं स्टाइल एट्रिब्यूट है (CSS jQuery मेथड का उपयोग करके प्राप्त करें) इमेज कंटेनर की चौड़ाई में जोड़ा गया, जो कुल दूरी से घटाया गया है। यदि इमेज कंटेनर दाएं से बाएं से आगे बढ़ रहा है, तो यात्रा के लिए बाईं ओर की दूरी इमेज कंटेनर की चौड़ाई है जो बाएं स्टाइल एट्रिब्यूट से कम है, जो कुल दूरी से घटाई जाती है। चौड़ाई और CSS jQuery मेथड्स स्ट्रिंग वैल्यू रीटर्न करता हैं, इसलिए हम इन्हें न्यूमेरिकल वैल्यूज में बदलने के लिए जावास्क्रिप्ट के parseInt फ़ंक्शन का उपयोग करते हैं।

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


दिशा बदलना

हमारी स्क्रिप्ट के अंतिम भाग के लिए हम एनीमेशन की दिशा बदलने के लिए इस्तेमाल किए गए कंट्रोल पैनल में लिंक के लिए हैंडलर जोड़ सकते हैं। कोड के तुरंत बाद हमने अभी जोड़ा है, निम्न कोड दर्ज करें:

यह फ़ंक्शन, बाएं से दाएं बटन पर क्लिक होने पर ट्रिगर होता है, अपेक्षाकृत सरल होता है और इसमें कोड पहले से ही उपयोग किए जाने वाले के सामान होते हैं; हम पहले वर्तमान एनीमेशन को रोकते हैं (जब विज़िटर कंट्रोल पैनल पर पॉइंटर को ले जाता है तो यह फिर से शुरू हो जाएगा), और उसके बाद क्लास का नाम स्वैप करें ताकि यह यात्रा की नई दिशा से मेल खा सके। इसके बाद हम एनीमेशन की नई अवधि को वैसे ही काम करते हैं जैसा हमने पहले किया था, अंततः हमारे एनिमेटर फ़ंक्शन को एक बार फिर कॉल करने से पहले। यह ltr बटन के लिए सिर्फ हैंडलर है; rtl बटन के लिए हैंडलर लगभग एक सामान है, लेकिन यात्रा की विपरीत दिशा के लिए सही गणना का उपयोग करता है:

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


सारांश

इस ट्यूटोरियल में हमने इमेजेज की एक श्रृंखला को डिस्प्ले करने के लिए एक मजेदार और इंटरैक्टिव विजेट बनाया है और आपके द्वारा बेचे जाने वाले प्रोडक्ट्स के निर्माताओं के लोगो (logos), या आपके द्वारा रेकमेंड सॉफ़्टवेयर के लोगो (logo), या जो कुछ भी आप पसंद करते हैं, के लोगो (logo) डिस्प्ले करने के लिए उपयोग किया जा सकता है। हमने मुख्य रूप से विजेट के एनीमेशन और इंटरैक्शन पहलुओं पर ध्यान केंद्रित किया, लेकिन ब्राउजर में जावास्क्रिप्ट डिसएबल होने पर मूल फॉलबैक प्रदान करने जैसी चीजों को भी ध्यान रखा जाता है।

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.