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