"BackgroundImageTransition", पृष्ठभूमि छवियों का चिकनी एनीमेशन

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

2. a : होवर , एक {
3. संक्रमण : रंग 0.3 s रैखिक ;
4. }

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

BackgroundImageTransition प्लगइन सेटिंग्स

चूंकि अधिकांश प्रोजेक्ट्स jQuery लाइब्रेरी का उपयोग करते हैं, इसलिए इस समस्या को हल करने के लिए, एक jquery प्लगइन लिखने का निर्णय लिया गया, जो बैकग्राउंड इमेज के लिए, यानी बैकग्राउंड-इमेज के लिए चिकनी ट्रांसफॉर्मेशन को लागू करेगा।

2. $ ( ".selector" ) । पृष्ठभूमिइमेजट्रांसिशन ( {
3. "संक्रमण-अवधि" : 500 ,
4. "ट्रांज़िशन-टाइमिंग-फंक्शन" : "स्विंग"
5. "संक्रमण-विलंब" : 0 ,
6. "छद्म वर्ग" : ": होवर"
7. } ;

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

संपत्ति	डिफ़ॉल्ट मान	संभव मान	विवरण
संक्रमण अवधि	0	मिलीसेकंड ( इंट ) में संख्या	एक एनिमेटेड संक्रमण की अवधि निर्धारित करता है
संक्रमण-समय-समारोह	झूला	मध्यवर्ती मूल्यों की गणना के लिए फ़ंक्शन का नाम ( स्ट्रिंग )	मध्यवर्ती मूल्यों की गणना के लिए एक फ़ंक्शन को परिभाषित करता है
संक्रमण-विलंब	0	मिलीसेकंड ( इंट ) में संख्या	एनीमेशन शुरू करने से पहले ठहराव निर्धारित करता है

आप उचित jquery प्लगइन जोड़कर संक्रमण-समय-फ़ंक्शन के संभावित मूल्य का विस्तार कर सकते हैं।
अतिरिक्त प्लगइन सेटिंग्स:

छद्म वर्ग	: होवर	: होवर,: फोकस,: सक्रिय	एक विशिष्ट छद्म वर्ग के साथ प्लगइन व्यवहार को जोड़ता है
eventActivate	mouseenter	jquery घटना ( स्ट्रिंग )	एनीमेशन ट्रिगर घटना
eventDeActivate	mouseleave	jquery घटना ( स्ट्रिंग )	रिवर्स एनिमेशन ट्रिगरिंग इवेंट

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

काम का सिद्धांत।

backgroundImageTransition.js पूर्ण स्थिति के साथ दो ब्लॉक बनाता है और उन्हें चयनकर्ता परत के शीर्ष पर रखता है, पहले ब्लॉक में मूल छवि होती है, दूसरा छवि को ब्लॉक करता है जिसमें मूल रूपांतरित होता है। ब्लॉक केवल एनीमेशन की अवधि के लिए बनाए जाते हैं, यानी, एनीमेशन के पूरा होने के बाद, उन्हें हटा दिया जाता है। ब्लॉक के बीच परिवर्तन अस्पष्टता की सीएसएस-संपत्ति का उपयोग करके होता है। निम्नलिखित उदाहरण पर विचार करें:

एक html मार्कअप मेनू है:

2. < ul id = "main-menu" >
3. < li class = "css" > <a href = "#"> मेनू आइटम 1 < / a > < / li >
4. ....
5. < / ul >

और सीएसएस नियम:

2. # मुख्य-मेनू .css {
3. पृष्ठभूमि-छवि : url ( "img / css.png" ) ;
4. }
5. # मुख्य-मेनू .css : होवर {
6. पृष्ठभूमि-छवि : url ( "img / css_hover.png" ) ;
7. }

हम प्लगइन को सक्रिय करते हैं (स्पष्टता के लिए, हम प्लगइन को एक छद्म वर्ग देंगे, जिस पर एनीमेशन प्रतिक्रिया देगा)।

2. $ ( ".css" ) । पृष्ठभूमिइमेजट्रांसिशन ( {
3. "संक्रमण-अवधि" : 300 ,
4. "छद्म वर्ग" : ": होवर"
5. } ;

300ms के दौरान, BackgroundImageTransition ट्रांसफ़ॉर्मेशन (संक्रमण) की कल्पना करता है, फिर एनीमेशन के लिए बनाए गए ब्लॉक को हटाता है और # मेन-मेन्यू .css: hover से छवि प्रदर्शित करता है, जब माउस पॉइंटर तत्व के बाहर जाता है, तो रिवर्स एक्शन किए जाते हैं। इस प्रकार, यह प्लगइन से स्वतंत्रता प्राप्त करता है। यदि कोई अन्य कोड समान मेनू के साथ काम करता है, तो उच्च संभावना के साथ संघर्ष नहीं होगा।

पृष्ठभूमिइमेजट्रांस स्प्राइट्स के साथ काम करने का समर्थन करता है:

2. # मुख्य-मेनू .psd {
3. पृष्ठभूमि : url ( "img / psd.png" ) नो-रिपीट ;
4. }
5. # मुख्य-मेनू .psd : होवर {
6. पृष्ठभूमि-स्थिति : 0 -172px ;
7. }

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

कहाँ से लाऊँ?

प्लगइन के आधिकारिक पृष्ठ पर backgroundImageTransition डाउनलोड करें। वहां आप एक डेमो देख सकते हैं। आप गिथब पर कीड़े के बारे में कांटा या लिख ​​सकते हैं।