জাভাস্ক্রিপ্টের মাধ্যমে এইচটিএমএল অ্যানিমেশন তৈরি করা শিখুন।
জাভাস্ক্রিপ্টের মাধ্যমে কিভাবে এইচটিএমএল অ্যানিমেশন তৈরি করতে হয় জানতে আমরা একটি সাধারন ওয়েবপেজ ব্যবহার করবো:
<!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';
}
}
}
Read more
or
