एक साधारिता स्वप कार्ड एनीमेशन

केवल HTML और CSS का उपयोग करके एक साधारिता कार्ड स्वप एनीमेशन। इसका उपयोग दो आइटमों के बीच तुलना दिखाने के लिए करें।

2 मिनट पढ़ने के लिए
सीएसएस
एचटीएमएल
नवागन्तुक
सीखना

अंतिम आउटपुट 🎉

HTML और CSS का उपयोग करके साधारिता कार्ड स्वप एनीमेशन

कार्ड के लिए HTML 💻

मैं जानता हूं कि यह 👇🏻 डरावना लगता है 😆, लेकिन … सचमुच, बस दो डिव्स हैं दो कार्डों के लिए।
आप इन डिव्स के चारों ओर क्या बंधाएं, यह आप पर है। आप एक सेक्शन या डिव का उपयोग कर सकते हैं, जो भी आपको चाहिए। 

     <div class="front-card">
  </div>

  <div class="back-card">
  </div>

एनीमेशन के लिए CSS 💻

यहां यह एनीमेशन कैसे काम करता है:

  • हम top और left प्रॉपर्टीज़ का उपयोग करके दो कार्डों को उनकी प्रारंभिक स्थितियों में स्थित करते हैं।
  • हम @keyframes का उपयोग व्यक्ति करने के लिए करते हैं, यानी, कार्ड को कैसे और कब ग़ति से चलना चाहिए।
  • हम z-index का उपयोग करके नियंत्रित करते हैं कि किसी भी समय दिया गया समय पर कौन सा कार्ड है।

और बस! सरल है ना? 😊

रूट वेरिएबल्स इस एनीमेशन का मज़ा हैं 🥳
आप इन वेरिएबल्स का उपयोग करके एनीमेशन के बारे में सब कुछ कस्टमाइज़ कर सकते हैं, (एनीमेशन के 50% समयफ्रेम को छोड़कर) और परिवर्तन एनीमेशन में प्रतिबिंबित होंगे।

मुझे पता है कि यह 👇🏻 बहुत सारे कोड की तरह दिखता है, लेकिन यह वास्तव में कुछ बार दोहराया गया है 😛। तो डरो मत और इसे एक बार पढ़ो। 

   :root {
	--front-card-z-index: 1;
	--back-card-z-index: 0;
	--animation-duration: 6s;
	--card-width: 500px;
	--front-card-start-top: 0%;
	--front-card-start-left: 0%;
	--back-card-start-top: -10%;
	--back-card-start-left: 10%;
}

.front-card {
	position: absolute;
	z-index: var(--front-card-z-index);
	top: var(--front-card-start-top);
	left: var(--front-card-start-left);
	animation: swap-front-card var(--animation-duration) ease-in-out infinite alternate;
}
  
.back-card {
	position: absolute;
	z-index: var(--back-card-z-index);
	top: var(--back-card-start-top);
	left: var(--back-card-start-left);
	animation: swap-back-card var(--animation-duration) ease-in-out infinite alternate;
}
  
@keyframes swap-front-card {
	0% {
		z-index: var(--front-card-z-index);
		top: var(--front-card-start-top);
		left: var(--front-card-start-left);
	}

	25% {
		z-index: var(--front-card-z-index);
		top: var(--front-card-start-top);
		left: var(--front-card-start-left);
	}

	40% {
		z-index: var(--front-card-z-index);
		top: var(--front-card-start-top);
		left: var(--front-card-start-left);
	}

	49% {
		z-index: var(--front-card-z-index);
	}

	50% {
		z-index: var(--back-card-z-index);
		top: calc(var(--front-card-start-top) - 10%);
		left: calc(var(--front-card-start-left) + 67%);
	}

	75% {
		z-index: var(--back-card-z-index);
		top: var(--back-card-start-top);
		left: var(--back-card-start-left);
	}

	100% {
		z-index: var(--back-card-z-index);
		top: var(--back-card-start-top);
		left: var(--back-card-start-left);
	}
}
  
@keyframes swap-back-card {
	0% {
		z-index: var(--back-card-z-index);
		top: var(--back-card-start-top);
		left: var(--back-card-start-left);
	}

	25% {
		z-index: var(--back-card-z-index);
		top: var(--back-card-start-top);
		left: var(--back-card-start-left);
	}

	40% {
		z-index: var(--back-card-z-index);
		top: var(--back-card-start-top);
		left: var(--back-card-start-left);
	}

	49% {
		z-index: var(--back-card-z-index);
	}

	50% {
		z-index: var(--front-card-z-index);
		top: calc(var(--back-card-start-top) + 10%);
		left: calc(var(--back-card-start-left) - 20%);
	}

	70% {
		z-index: var(--front-card-z-index);
		top: var(--front-card-start-top);
		left: var(--front-card-start-left);
	}

	100% {
		z-index: var(--front-card-z-index);
		top: var(--front-card-start-top);
		left: var(--front-card-start-left);
	}
}

बस इतना ही! धन्यवाद 🤗 कि इतना नीचे तक पढ़ने के लिए

JavaScript में एक पुनरावृत्ति फ़ाइल खोज एल्गोरिदम

JavaScript में एक पुनरावृत्ति फ़ाइल खोज एल्गोरिदम जो एक डायरेक्टरी ...

बन क्या है?

बन, नया जावास्क्रिप्ट/टाइपस्क्रिप्ट रनटाइम है। लेकिन इसकी कहानी क्या है? ...