HTML DOM অ্যানিমেশন
জাভাস্ক্রিপ্ট ব্যবহার করে এইচটিএমএল অ্যানিমেশন তৈরি করতে শিখুন।
একটি মৌলিক ওয়েব পেজ
জাভাস্ক্রিপ্ট দিয়ে এইচটিএমএল অ্যানিমেশন কীভাবে তৈরি করা যায় তা প্রদর্শন করতে, আমরা একটি সাধারণ ওয়েব পৃষ্ঠা ব্যবহার করব:
উদাহরণ
<!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>স্টাইলিং উপাদান
ধারক উপাদান শৈলী = "অবস্থান: আপেক্ষিক" দিয়ে তৈরি করতে হবে।
অ্যানিমেটেড উপাদানটি স্টাইল = "অবস্থান: পরম" দিয়ে তৈরি করা উচিত।
উদাহরণ
#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';
}
}
}ইন্টারেক্টিভ অ্যানিমেটেড প্রদর্শন
একটি লাইভ অ্যানিমেশন প্রদর্শনী
let animationId = null;
let position = 0;
function startAnimation() {
const elem = document.getElementById("animateBox");
clearInterval(animationId);
animationId = setInterval(frame, 5);
function frame() {
if (position == 350) {
clearInterval(animationId);
} else {
position++;
elem.style.top = position + 'px';
elem.style.left = position + 'px';
}
}
}
অ্যানিমেশন টিপস
ঘটনা ব্যবধান
সংক্ষিপ্ত বিরতি (5-10ms) মসৃণ অ্যানিমেশন প্রদান করে, কিন্তু CPU ব্যবহার বাড়ায়
উপযুক্ত স্টপ
অ্যানিমেশন সম্পন্ন করার পরে clearInterval() ব্যবহার করতে ভুলবেন না, অন্যথায় একটি মেমরি লিক হতে পারে
কম্পিউটেশনাল দক্ষতা
জটিল গণনা এড়িয়ে চলুন। CSS রূপান্তরগুলি জাভাস্ক্রিপ্টের চেয়ে বেশি দক্ষ
ব্রাউজার সামঞ্জস্য
সমস্ত আধুনিক ব্রাউজারে setInterval() এবং clearInterval() সমর্থন রয়েছে