कैसे करें - जावास्क्रिप्ट एचटीएमएल एनिमेशन
जावास्क्रिप्ट का उपयोग करके एनिमेशन बनाना सीखें।
एक बुनियादी वेब पेज
जावास्क्रिप्ट के साथ 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>
तत्वों को स्टाइल करना
एनीमेशन को संभव बनाने के लिए, एनिमेटेड तत्व को "पैरेंट कंटेनर" के सापेक्ष एनिमेटेड होना चाहिए।
कंटेनर तत्व शैली = "स्थिति: सापेक्ष" के साथ बनाया जाना चाहिए।
एनीमेशन तत्व शैली = "स्थिति: पूर्ण" के साथ बनाया जाना चाहिए।
उदाहरण
#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 (/*
test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
जावास्क्रिप्ट का उपयोग करके एनिमेशन बनाएं
उदाहरण
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';
}
}
}