জাভাস্ক্রিপ্টে মৌলিক অ্যানিমেশন বাস্তবায়ন করতে, DOM অবজেক্ট বৈশিষ্ট্য এবং জাভাস্ক্রিপ্ট ব্যবহার করুন। নিম্নলিখিত তালিকায় বিভিন্ন DOM পদ্ধতি রয়েছে৷
- আমরা JavaScript ফাংশন ব্যবহার করছি getElementById() একটি DOM অবজেক্ট পেতে এবং তারপর এটিকে একটি গ্লোবাল ভেরিয়েবলimgObj এ বরাদ্দ করা
- আমরা একটি ইনিশিয়ালাইজেশন ফাংশন init() সংজ্ঞায়িত করেছি শুরু করার জন্যimgObj যেখানে আমাদের তার অবস্থান সেট করতে হবে এবং বাম গুণাবলী।
- উইন্ডো লোডের সময় আমরা একটি ইনিশিয়ালাইজেশন ফাংশনকে কল করছি।
- অবশেষে, আমরা কল করছি moveRight() 10 পিক্সেল দ্বারা বাম দূরত্ব বৃদ্ধি ফাংশন. আপনি এটিকে বাম দিকে সরানোর জন্য এটিকে একটি ঋণাত্মক মান সেট করতে পারেন৷
<html>
<head>
<title>JavaScript Animation</title>
<script>
<!--
var imgObj = null;
function init() {
imgObj = document.getElementById('myImage');
imgObj.style.position= 'relative';
imgObj.style.left = '0px';
}
function moveRight() {
imgObj.style.left = parseInt(imgObj.style.left) + 10 + 'px';
}
window.onload =init;
//-->
</script>
</head>
<body>
<form>
<img id="myImage" src="/images/html.gif" />
<p>Click button below to move the image to right</p>
<input type="button" value="Click Me" onclick="moveRight();" />
</form>
</body>
</html> 