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

चाबी छीनना

  • सीएसएस परिवर्तन आसानी से संपत्ति मूल्यों को बदलते हैं, वेब तत्वों में फीडबैक और दृश्य अपील जोड़ते हैं, और उपयोगकर्ता अनुभव को बढ़ाते हैं।
  • संक्रमण-संपत्ति, संक्रमण-अवधि, संक्रमण-समय-कार्य, और संक्रमण-विलंब जैसे संक्रमण गुण संक्रमण के व्यवहार और समय को नियंत्रित करने में महत्वपूर्ण हैं।
  • शुरुआती लोगों को सरल बदलाव से शुरुआत करनी चाहिए, बॉक्स मॉडल को समझना चाहिए, पहले से बदलाव की योजना बनानी चाहिए, प्रदर्शन के लिए अनुकूलन करें, पहुंच पर विचार करें और निर्बाध के लिए Chrome के डेवलपर टूल का उपयोग करें विकास।

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

निर्बाध, इंटरैक्टिव वेबसाइट बनाना शुरू करने से पहले आपको सीएसएस बदलावों, गुणों, सर्वोत्तम प्रथाओं और बहुत कुछ की समझ की आवश्यकता होगी।

instagram viewer

सीएसएस बदलाव को समझना

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

एक ट्रिगर घटना के जवाब में एक संक्रमण होता है, जैसे किसी बटन पर मँडराना। उदाहरण के लिए, जब आप किसी बटन पर होवर करते हैं, तो सीएसएस संक्रमण उसके पृष्ठभूमि रंग को एक स्थिति (प्रारंभिक) से दूसरे (अंतिम) में बदल सकता है। यह परिवर्तन आपके द्वारा निर्दिष्ट अवधि के दौरान होता है, जिससे एक आकर्षक प्रभाव पैदा होता है।

संक्रमण गुण

चाहे आप कोई भी प्रभाव पैदा करने का प्रयास कर रहे हों, आपको उपलब्ध संक्रमण गुणों को समझने की आवश्यकता है। आप अपने बदलावों के व्यवहार को बेहतर बनाने के लिए इनका उपयोग कर सकते हैं।

संक्रमण-संपत्ति

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

यहाँ वाक्यविन्यास है:

transition-property: property1, property2, ...;

अवस्थांतर अवधि

यह गुण संक्रमण प्रभाव की अवधि निर्धारित करता है, यह निर्दिष्ट करता है कि एनीमेशन को पूरा होने में कितना समय लगना चाहिए। सेकंड या मिलीसेकंड (एमएस) का उपयोग करके मान निर्दिष्ट करें 0.5s या 300 मि.से. यह वाक्यविन्यास है:

transition-duration: time;

संक्रमण-समय-कार्य

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

  • आसानी: धीमी शुरुआत, फिर तेज़, फिर धीमा अंत (डिफ़ॉल्ट)।
  • रेखीय: निरंतर गति।
  • आराम से: धीमी शुरुआत.
  • आराम करो: धीमा अंत.
  • आसानी से अंदर-बाहर: धीमी शुरुआत और अंत.

यहाँ वाक्यविन्यास है:

transition-timing-function: timing-function;

संक्रमण-विलंब

यह संपत्ति संक्रमण शुरू होने से पहले देरी लाती है। आप मान को सेकंड या मिलीसेकंड (एमएस) में निर्दिष्ट कर सकते हैं। वाक्यविन्यास है:

transition-delay: time;

ये गुण सामूहिक रूप से नियंत्रित करते हैं कि संक्रमण कैसे व्यवहार करता है, जिसमें कौन से गुण चेतन होते हैं और एनीमेशन का समय कैसे व्यवहार करता है।

सरल बदलावों के साथ शुरुआत करना

सीएसएस संक्रमण गुणों को समझना एक बात है, लेकिन वे व्यवहार में कैसे काम करते हैं? जब भी आप ट्रांज़िशन का उपयोग करके किसी तत्व को स्टाइल करना चाहते हैं तो यहां कुछ चरणों का पालन करना होगा।

1. अपना HTML तत्व चुनें

वह HTML तत्व चुनें जिस पर आप ट्रांज़िशन लागू करना चाहते हैं। यह एक बटन, लिंक, छवि या कोई अन्य तत्व हो सकता है जिसमें आप एक इंटरैक्टिव प्रभाव जोड़ना चाहते हैं।

html>
<html>
<head>
<style>
 /* CSS goes here */
style>
head>
<body>

<buttonclass="transition-button">Hover Mebutton>
body>
html>

यह मार्कअप आपको काम शुरू करने के लिए एक बुनियादी, डिफ़ॉल्ट बटन देगा:

2. परिवर्तन के लिए संपत्ति की पहचान करें और प्रारंभिक स्थिति को परिभाषित करें

निर्धारित करें कि चयनित तत्व की कौन सी सीएसएस संपत्ति आप एनिमेट करना चाहते हैं और सीएसएस का उपयोग करके तत्व की प्रारंभिक शैली सेट करें। यह स्थिति दर्शाती है कि जब उपयोगकर्ता इसके साथ इंटरैक्ट नहीं कर रहे हैं तो तत्व कैसा दिखाई देता है।

<style>
/* Identify the property (background-color) */
.transition-button {
 /* Define the initial state */
 background-color: blue;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}
style>

आपके बटन में अब कुछ शैलियाँ होंगी जिनके साथ आप परिवर्तन का अभ्यास कर सकते हैं:

3. होवर स्थिति निर्दिष्ट करें

एक सीएसएस नियम बनाएं जो तत्व पर होवर करने पर लागू होता है। इस नियम के अंतर्गत, दूसरे चरण में आपके द्वारा पहचानी गई सीएसएस संपत्ति को उसकी अंतिम स्थिति में बदलें।

<style>
/* Specify the hover state */
.transition-button: hover {
 background-color: red;
}
style>

4. संक्रमण गुण लागू करें

उपयोग संक्रमण-संपत्ति, अवस्थांतर अवधि, और संक्रमण-समय-कार्य संक्रमण विवरण निर्दिष्ट करने के लिए गुण।

<style>
.transition-button {
 /* Specify transition properties */
 transition-property: background-color;
 transition-duration: 0.5s;
 transition-timing-function: ease;
}
style>

यह उदाहरण दर्शाता है कि पृष्ठभूमि रंग संक्रमण के साथ एक साधारण बटन कैसे बनाया जाए जो तब चलता है जब पॉइंटर उस पर घूमता है। पृष्ठभूमि का रंग सहज प्रभाव के साथ 0.5 सेकंड में आसानी से नीले से लाल में परिवर्तित हो जाता है। इसका पूरा असर आप देख सकते हैं GitHub डेमो.

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

शुरुआती लोगों के लिए सर्वोत्तम अभ्यास और युक्तियाँ

सीएसएस ट्रांज़िशन के साथ काम शुरू करने में आपकी सहायता के लिए यहां कुछ सर्वोत्तम अभ्यास और युक्तियां दी गई हैं।

  • सरल बदलावों से शुरुआत करें. यदि आप सीएसएस बदलावों में नए हैं, तो रंग परिवर्तन या अस्पष्टता समायोजन जैसे सीधे एनिमेशन से शुरुआत करें। यह आपको अधिक जटिल बदलावों से निपटने से पहले बुनियादी बातें समझने में मदद करेगा।
  • बॉक्स मॉडल को समझें. अपने आप को परिचित करें सीएसएस बॉक्स मॉडल, जिसमें चौड़ाई, ऊंचाई, पैडिंग और मार्जिन जैसे गुण शामिल हैं। तत्वों को एनिमेट करते समय यह समझना महत्वपूर्ण है कि ये गुण कैसे काम करते हैं।
  • अपने बदलावों की योजना बनाएं. परिवर्तन लागू करने से पहले, योजना बनाएं कि आप क्या हासिल करना चाहते हैं। अनावश्यक परीक्षण और त्रुटि से बचने के लिए कागज पर या डिजिटल रूप से संक्रमण की स्थिति, समय और प्रभावों को रेखांकित करें।
  • प्रदर्शन के लिए अनुकूलन करें. ट्रांज़िशन का उपयोग करते समय प्रदर्शन का ध्यान रखें. विशेष रूप से मोबाइल उपकरणों पर जटिल ट्रांज़िशन का अत्यधिक उपयोग करने से बचें, क्योंकि वे लोडिंग समय और उपयोगकर्ता अनुभव को प्रभावित करते हैं।
  • पहुंच पर विचार करें. सुनिश्चित करें कि आपके बदलाव सभी उपयोगकर्ताओं के लिए सुलभ हों। सामग्री या कार्यों तक पहुंचने के वैकल्पिक तरीके प्रदान करें जो बदलावों पर निर्भर हैं, विशेष रूप से विकलांग लोगों के लिए।
  • Chrome के डेवलपर टूल का उपयोग करें. निर्बाध संक्रमण विकास के लिए Chrome के डेवलपर टूल का अधिकतम लाभ उठाएं। संक्रमण गुणों का निरीक्षण और संशोधन करने के लिए DevTools का उपयोग करें वास्तविक समय में और विभिन्न समय कार्यों के साथ प्रयोग करें।

इन सर्वोत्तम प्रथाओं और युक्तियों का पालन करके, आप सीएसएस बदलावों के साथ काम करने में एक ठोस आधार बना सकते हैं और धीरे-धीरे आकर्षक और इंटरैक्टिव वेब अनुभव बनाने के लिए अपने कौशल विकसित कर सकते हैं।

क्रॉस-ब्राउज़र संगतता

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

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

इन प्रथाओं का पालन करने से आप सीएसएस ट्रांज़िशन बना सकते हैं जो विभिन्न ब्राउज़रों पर सुचारू रूप से और लगातार काम करते हैं।

सीएसएस ट्रांज़िशन के साथ अभ्यास करते रहें

सीएसएस बदलावों में नवीनतम वेब विकास रुझानों और सर्वोत्तम प्रथाओं के साथ बने रहें। अद्वितीय प्रभाव प्राप्त करने के लिए विभिन्न संक्रमण गुणों और मूल्यों के साथ प्रयोग करने में संकोच न करें। सीखने में अक्सर परीक्षण और त्रुटि शामिल होती है, इसलिए समय के साथ अपने बदलावों को दोहराएँ और समायोजित करें।