कैसे बनाएं: JavaScript HTML एनीमेशन
- पिछला पृष्ठ गैर-पाठ रंग उच्चायन
- अगला पृष्ठ JS स्ट्रिंग लंबाई
जेवास्क्रिप्ट के द्वारा एनीमेशन कैसे बनाएं सीखें
एक बुनियादी वेबपेज
हम जेवास्क्रिप्ट के द्वारा HTML एनीमेशन कैसे बनाया जाता है का प्रदर्शन करने के लिए, एक साधारण वेबपेज का इस्तेमाल कर सकते हैं。
उदाहरण
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript Animation</h1>
<div id="myContainer">
<div id="myAnimation">My animation will go here</div>
</div>
</body>
<html>
एलिमेंट का शैली सेट करें
एनीमेशन को संभव बनाने के लिए, एनीमेशन एलिमेंट को 'माता कंटेनर' के अपेक्षाकृत एनीमेशन किया जाना चाहिए。
कंटेनर एलिमेंट को इस्तेमाल करें style="position: relative" बनाएं
एनीमेशन एलिमेंट को इस्तेमाल करें style="position: absolute" बनाएं
उदाहरण
#myContainer {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#myAnimation {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
एनीमेशन कोड
जेवास्क्रिप्ट एनीमेशन एलिमेंट के शैली को धीरे-धीरे बदलकर कार्य करता है。
ये परिवर्तनों को टाइमर द्वारा बुलाया जाता है। जब टाइमर अंतर कम होता है, तो एनीमेशन लगातार दिखती है。
बुनियादी कोड है:
उदाहरण
var id = setInterval(frame, 5);
function frame() {
if (/* पूर्ण होने के लिए परीक्षण */) {
clearInterval(id);
} else {
/* पूर्ण होने के लिए परीक्षण का कोड */
}
}
जेवास्क्रिप्ट के द्वारा एनीमेशन बनाएं
उदाहरण
var id = null;
function myMove() {
var elem = document.getElementById("myAnimation");
var pos = 0;
clearInterval(id);
id = setInterval(frame, 10);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
- पिछला पृष्ठ गैर-पाठ रंग उच्चायन
- अगला पृष्ठ JS स्ट्रिंग लंबाई
