MooTools-এ Fx.Tween এবং Fx.Morph দুটি শক্তিশালী অ্যানিমেশন ক্লাস, যা আপনি ওয়েব পেজের উপাদানগুলির উপর অ্যানিমেশন তৈরি করতে ব্যবহার করতে পারেন। এই ক্লাস দুটি আপনাকে সহজভাবে এলিমেন্টের বিভিন্ন প্রপার্টি অ্যানিমেট করতে সাহায্য করে। Fx.Tween সাধারণত একটি প্রপার্টি এককভাবে অ্যানিমেট করতে ব্যবহৃত হয়, এবং Fx.Morph একাধিক প্রপার্টি একসাথে অ্যানিমেট করতে ব্যবহৃত হয়।
1. Fx.Tween ব্যবহার করে এলিমেন্ট অ্যানিমেট করা
Fx.Tween ক্লাস ব্যবহার করে আপনি একটি নির্দিষ্ট CSS প্রপার্টি অ্যানিমেট করতে পারেন। উদাহরণস্বরূপ, একটি ডিভ এলিমেন্টের প্রস্থ (width) বা উচ্চতা (height) অ্যানিমেট করা।
উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Fx.Tween Animation Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// Fx.Tween এর মাধ্যমে প্রস্থ অ্যানিমেট করা
var element = $('myDiv');
var tween = new Fx.Tween(element, {
duration: 1000, // অ্যানিমেশন সময় 1 সেকেন্ড
transition: Fx.Transitions.Sine.easeInOut // অ্যানিমেশন ট্রানজিশন
});
// একটি বাটনে ক্লিক করলে অ্যানিমেশন শুরু হবে
$('animateButton').addEvent('click', function() {
tween.start('width', 300); // প্রস্থ 300px হয়ে যাবে
});
});
</script>
</head>
<body>
<button id="animateButton">অ্যানিমেট করুন</button>
<div id="myDiv" style="width: 100px; height: 100px; background-color: lightblue; border: 1px solid black;">
<p>এটি একটি ডিভ</p>
</div>
</body>
</html>
এই কোডে, Fx.Tween ব্যবহার করে myDiv ডিভটির প্রস্থ অ্যানিমেট করা হয়েছে। বাটনে ক্লিক করলে ডিভটির প্রস্থ ১০০px থেকে ৩০০px হয়ে যাবে।
2. Fx.Morph ব্যবহার করে এলিমেন্ট অ্যানিমেট করা
Fx.Morph ক্লাস ব্যবহার করে আপনি একাধিক CSS প্রপার্টি একসঙ্গে অ্যানিমেট করতে পারেন। এর মাধ্যমে আপনি সহজেই বিভিন্ন স্টাইল প্রপার্টি যেমন height, width, background-color, opacity ইত্যাদি একসাথে অ্যানিমেট করতে পারবেন।
উদাহরণ
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>Fx.Morph Animation Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// Fx.Morph এর মাধ্যমে একাধিক প্রপার্টি অ্যানিমেট করা
var element = $('myDiv');
var morph = new Fx.Morph(element, {
duration: 1500, // অ্যানিমেশন সময় 1.5 সেকেন্ড
transition: Fx.Transitions.Quad.easeInOut // ট্রানজিশন টাইপ
});
// একটি বাটনে ক্লিক করলে অ্যানিমেশন শুরু হবে
$('animateButton').addEvent('click', function() {
morph.start({
'width': '300px',
'height': '300px',
'background-color': '#ff0000',
'opacity': 0.5
});
});
});
</script>
</head>
<body>
<button id="animateButton">অ্যানিমেট করুন</button>
<div id="myDiv" style="width: 100px; height: 100px; background-color: lightblue; border: 1px solid black;">
<p>এটি একটি ডিভ</p>
</div>
</body>
</html>
এই কোডে, Fx.Morph ব্যবহার করে myDiv ডিভটির width, height, background-color, এবং opacity একসাথে অ্যানিমেট করা হয়েছে। বাটনে ক্লিক করলে ডিভটি ১০০px থেকে ৩০০px, ব্যাকগ্রাউন্ড রঙ লাল (red) হবে এবং অপাসিটি ০.৫ হয়ে যাবে।
সারাংশ
MooTools এর Fx.Tween এবং Fx.Morph ক্লাস ব্যবহার করে আপনি সহজে এলিমেন্টগুলির স্টাইল প্রপার্টি অ্যানিমেট করতে পারেন। Fx.Tween একক প্রপার্টির জন্য এবং Fx.Morph একাধিক প্রপার্টি একসাথে অ্যানিমেট করার জন্য ব্যবহৃত হয়। এই দুটি ক্লাস আপনাকে বিভিন্ন ধরনের মসৃণ অ্যানিমেশন তৈরি করতে সহায়তা করে, যা ওয়েব পেজের ইন্টারঅ্যাকটিভিটি এবং ইউজার এক্সপেরিয়েন্সকে উন্নত করতে পারে।
Read more
