জাভাস্ক্রিপ্ট এইচটিএমএল ডোম অ্যানিমেশন
জাভাস্ক্রিপ্টের মাধ্যমে এইচটিএমএল অ্যানিমেশন তৈরি করা শিখুন।
একটি বেসিক ওয়েবপেজ
জাভাস্ক্রিপ্টের মাধ্যমে কিভাবে এইচটিএমএল অ্যানিমেশন তৈরি করতে হয় জানতে আমরা একটি সাধারন ওয়েবপেজ ব্যবহার করবো:
উদাহরণ
<!DOCTYPE html>
<html>
<body>
<h2>জাভাস্ক্রিপ্ট অ্যানিমেশন</h2>
<div id="anim">এখানে অ্যানিমেশন হবে</div>
</body>
</html>
ফলাফল
অ্যানিমেশন কন্টেইনার তৈরি ও স্টাইল
সকল অ্যানিমেশনকে একটি কন্টেইনার এলিমেন্টের মাঝে রাখতে হবে।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
<style>
#container {
width: 200px;
height: 200px;
position: relative;
background: teal;
}
#anim {
width: 20px;
height: 20px;
position: absolute;
background: lightblue;
}
</style>
</head>
<body>
<h2>জাভাস্ক্রিপ্ট অ্যানিমেশন</h2>
<p>
<button onclick="myMove()">ক্লিক করুন</button>
</p>
<div id="container">
<div id="anim"></div>
</div>
</body>
</html>
ফলাফল
অ্যানিমেশন কোড
একটি এলিমেন্টের স্টাইলের ধারাবাহিক পরিবর্তনের মাধ্যমে জাভাস্ক্রিপ্ট অ্যানিমেশন সম্পন্ন হয়।
এই পরিবর্তনটি একটি টাইমার দ্বারা কল করা হয়। যখন সময়ের ব্যবধান কম হয়, তখন অ্যানিমেশনটি চলমান দেখায়।
প্রাথমিক কোডঃ
উদাহরণ
var animId = setInterval(frame, 5);
function frame() {
if (/* শেষ হয়েছে কিনা যাচাই করতে */) {
clearInterval(id);
} else {
/* এলিমেন্টকে পরিবর্তন করার কোড */
}
}
জাভাস্ক্রিপ্ট ব্যবহার করে অ্যানিমেশন তৈরি
উদাহরণ
function myAnim() {
var el = document.getElementById("anim");
var pos = 0;
var animId = setInterval(frame, 20);
function frame() {
if (pos == 180) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
ফলাফল