JavaScript HTML DOM Animation সম্পূর্ণ বাংলা টিউটোরিয়াল
Animation হল এমন একটি কৌশল যার মাধ্যমে HTML এলিমেন্টগুলোর গতি, অবস্থান, আকার বা রঙ ধীরে ধীরে পরিবর্তন করা যায়। এই টিউটোরিয়ালে আমরা JavaScript ব্যবহার করে কিভাবে HTML DOM এর মাধ্যমে এলিমেন্ট এনিমেট করব তা শিখবো।
১. DOM Animation কি?
DOM Animation বলতে বোঝানো হয় যখন আমরা Document Object Model এর উপাদানগুলোকে ধীরে ধীরে পরিবর্তন করি – যেমন একটা বক্সকে ডানে সরানো, আকার বড় করা বা রঙ পরিবর্তন। এটা করতে আমরা ব্যবহার করি setInterval() বা requestAnimationFrame()।
২. Animation এর জন্য প্রাথমিক HTML
<div id="box" style="width:100px;height:100px;background:red;position:absolute;"></div>
উপরের কোডে একটি বক্স তৈরি করা হয়েছে যেটা absolute position সহ একটি নির্দিষ্ট স্থানে থাকবে। এখন আমরা JavaScript দিয়ে এটি সরাবো।
৩. JavaScript দিয়ে Move Animation
<script>
let box = document.getElementById("box");
let position = 0;
let interval = setInterval(function() {
if (position >= 350) {
clearInterval(interval);
} else {
position++;
box.style.left = position + "px";
}
}, 5);
</script>
এই স্ক্রিপ্টে আমরা প্রতি ৫ মিলিসেকেন্ডে বক্সের left পজিশন ১px করে বাড়াচ্ছি। ৩৫০px পৌঁছালে এনিমেশন থেমে যায়।
৪. Animation টেবিল উদাহরণ
নিচে একটি টেবিল দেওয়া হলো যেখানে এনিমেশনে ব্যবহৃত মূল ফাংশনগুলোর কাজ দেখানো হয়েছে।
| ফাংশন | ব্যাখ্যা |
|---|---|
| setInterval() | নির্দিষ্ট সময় অন্তর ফাংশন চালায় |
| clearInterval() | setInterval থামাতে ব্যবহৃত হয় |
| requestAnimationFrame() | ব্রাউজারের ফ্রেম রেট অনুযায়ী এনিমেশন চালায় |
৫. requestAnimationFrame দিয়ে Smooth Animation
<script>
let pos = 0;
function animateBox() {
if (pos < 350) {
pos++;
document.getElementById("box").style.left = pos + "px";
requestAnimationFrame(animateBox);
}
}
animateBox();
</script>
requestAnimationFrame() অনেক বেশি স্মুথ এবং CPU efficient। এটি এনিমেশনের জন্য ব্রাউজারকে সময় দেয় সঠিকভাবে রেন্ডার করার।
৬. এনিমেশন বন্ধ করা
যদি আপনি চাইেন একটি বাটনে ক্লিক করে এনিমেশন বন্ধ করতে:
<button onclick="stopMove()">থামাও</button>
<script>
let id = setInterval(move, 5);
function move() {
if (position >= 350) {
clearInterval(id);
} else {
position++;
box.style.left = position + "px";
}
}
function stopMove() {
clearInterval(id);
}
</script>
৭. অতিরিক্ত Animation কৌশল
- রঙ পরিবর্তনের জন্য
element.style.backgroundColor - আকার পরিবর্তনে
element.style.width,height - ধীরে ধীরে অদৃশ্য করতে
opacityব্যবহার করুন
✅ ৮. উপসংহার
এই টিউটোরিয়ালে আমরা শিখলাম কিভাবে JavaScript HTML DOM Animation কাজ করে। DOM এর মাধ্যমে এলিমেন্টদের চলাচল, আকার পরিবর্তন এবং স্টাইল পরিবর্তন করা যায় সহজেই। এটি ওয়েবপেজকে আরও ইন্টারেকটিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে।