কিভাবে তৈরি করা: JavaScript HTML অ্যানিমেশন
জাভাস্ক্রিপ্ট দ্বারা অ্যানিমেশন তৈরি করা কিভাব
একটি বেসিক ওয়েবসাইট
যদি আমরা জাভাস্ক্রিপ্ট দ্বারা 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 (/* test for finished */) {
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';
}
}
}
