व्याख्यान 7: सीएसएस बदलाव और एनिमेशन

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

सीएसएस बदलावों का परिचय

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

1. मूल सिंटैक्स

एक संक्रमण बनाने के लिए, आपको संक्रमण, अवधि और वैकल्पिक सहजता कार्यों के लिए सीएसएस संपत्ति निर्दिष्ट करने की आवश्यकता है।

• उदाहरण:

  .button {
    background-color: #4CAF50;
    transition: background-color 0.3s ease;
  }

  .button:hover {
    background-color: #45a049;
  }

इस उदाहरण में, होवर करने पर बटन का पृष्ठभूमि रंग 0.3 सेकंड में आसानी से बदल जाता है।

2. एकाधिक गुणों का संक्रमण

आप कई संपत्तियों को अल्पविराम से अलग करके एक साथ परिवर्तित कर सकते हैं।

• उदाहरण:

  .box {
    width: 100px;
    height: 100px;
    background-color: #333;
    transition: width 0.5s, height 0.5s, background-color 0.5s;
  }

  .box:hover {
    width: 150px;
    height: 150px;
    background-color: #555;
  }

यह उदाहरण होवर पर बॉक्स की चौड़ाई, ऊंचाई और पृष्ठभूमि का रंग आसानी से बदल देता है।

3. आसान कार्य

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

• सामान्य सहजता कार्य:
  • सहजता: धीरे-धीरे शुरू होता है, फिर गति बढ़ाता है, फिर धीमा हो जाता है।
  • रैखिक: एक स्थिर गति बनाए रखता है।
  • आसानी से: धीरे-धीरे शुरू होता है, फिर गति बढ़ाता है।
  • ईज़-आउट: तेज़ी से शुरू होता है, फिर धीमा हो जाता है।

सीएसएस एनिमेशन का परिचय

सीएसएस एनिमेशन आपको सरल बदलावों से परे, समय के साथ परिवर्तनों के अधिक जटिल अनुक्रम बनाने की अनुमति देते हैं। आप कई संपत्तियों को एनिमेट कर सकते हैं, समय को नियंत्रित कर सकते हैं और बेहतर नियंत्रण के लिए कीफ़्रेम बना सकते हैं।

1. मूल सिंटैक्स

एनीमेशन बनाने के लिए, कीफ़्रेम को परिभाषित करें और उन्हें एनीमेशन प्रॉपर्टी का उपयोग करके एक तत्व पर लागू करें।

• उदाहरण:

  @keyframes example {
    0% {background-color: red; left: 0px;}
    50% {background-color: yellow; left: 100px;}
    100% {background-color: green; left: 0px;}
  }

  .animate-box {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    animation: example 5s infinite;
  }

इस उदाहरण में:

• @keyframes नियम एनीमेशन चरणों को परिभाषित करता है, पृष्ठभूमि का रंग और स्थिति बदलता है।
• .animate-box वर्ग एनीमेशन लागू करता है, जो 5 सेकंड तक चलता है और अनंत बार दोहराता है।

2. एनिमेशन समय को नियंत्रित करना

आप एनीमेशन के समय, विलंब और पुनरावृत्ति की संख्या को नियंत्रित कर सकते हैं।

• उदाहरण:

  .animate-box {
    animation: example 5s ease-in-out 1s 3 alternate;
  }

• 5s: एनीमेशन की अवधि।
• ईज़-इन-आउट: ईज़िंग फ़ंक्शन।
• 1एस: एनीमेशन शुरू होने से पहले देरी।
• 3: एनीमेशन तीन बार दोहराया जाएगा।
• वैकल्पिक: एनीमेशन प्रत्येक पुनरावृत्ति पर दिशा उलट देगा।

3. ट्रांज़िशन और एनिमेशन का संयोजन

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

• उदाहरण:

  .button {
    background-color: #4CAF50;
    transition: transform 0.3s ease;
  }

  .button:hover {
    transform: scale(1.1);
  }

  @keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

  .pulse-button {
    animation: pulse 1s infinite;
  }

यह उदाहरण:

• .बटन वर्ग होवर पर बटन को थोड़ा स्केल करने के लिए एक संक्रमण का उपयोग करता है।
• .पल्स-बटन वर्ग निरंतर स्पंदन प्रभाव बनाने के लिए एनीमेशन का उपयोग करता है।

व्यावहारिक उदाहरण:

आइए एक प्रतिक्रियाशील, इंटरैक्टिव बटन बनाने के लिए ट्रांज़िशन और एनिमेशन को संयोजित करें।

HTML:

Hover Me!

सीएसएस:

.animated-button {
  padding: 15px 30px;
  font-size: 16px;
  color: white;
  background-color: #008CBA;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.animated-button:hover {
  background-color: #005f73;
  transform: translateY(-5px);
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.animated-button:active {
  animation: shake 0.5s;
}

इस उदाहरण में:

• बटन अपना पृष्ठभूमि रंग बदलता है और होवर करने पर थोड़ा ऊपर की ओर बढ़ता है।
• जब बटन पर क्लिक किया जाता है, तो यह एक कस्टम एनीमेशन का उपयोग करके हिलता है।

अभ्यास अभ्यास

1. एक लिंक के लिए एक होवर प्रभाव बनाएं जो उसका रंग बदलता है और एक संक्रमण का उपयोग करके एक अंडरलाइन जोड़ता है।
2. एक कीफ़्रेम एनीमेशन बनाएं जो एक तत्व को एक सर्कल में ले जाता है।
3. एक बटन या कार्ड जैसा एक इंटरैक्टिव तत्व बनाने के लिए ट्रांज़िशन और एनिमेशन को संयोजित करें जो स्केल करता है, रंग बदलता है, या इंटरैक्शन पर एनिमेट करता है।

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

मुझे लिंक्डइन पर फॉलो करें

रिदोय हसन