MooTools-এ Fx.Tween এবং Fx.Morph দুটি শক্তিশালী ক্লাস, যা CSS প্রপার্টি পরিবর্তন করতে ব্যবহৃত হয়। এই ক্লাসগুলো দিয়ে আপনি ওয়েব পেজের বিভিন্ন উপাদানের স্টাইল পরিবর্তন করতে পারেন, যেমন সাইজ, পজিশন, অপাসিটি (opacity), রঙ ইত্যাদি, সবকিছু অ্যানিমেটেড ভাবে। এগুলো ব্যবহার করে আপনি ব্যবহারকারীর জন্য মসৃণ এবং ইন্টারঅ্যাকটিভ ইফেক্ট তৈরি করতে পারবেন।
Fx.Tween
Fx.Tween একটি MooTools ক্লাস যা একটি একক CSS প্রপার্টির মান পরিবর্তন করতে সাহায্য করে। এটি সাধারণত একটি নির্দিষ্ট CSS প্রপার্টি (যেমন opacity, left, top, width, height) অ্যানিমেটেডভাবে পরিবর্তন করতে ব্যবহৃত হয়। Fx.Tween সিঙ্গেল প্রপার্টি এনিমেশন হিসেবে কাজ করে, এবং এটি একটি নির্দিষ্ট সময়ের মধ্যে প্রপার্টির মান পরিবর্তন করতে পারে।
Fx.Tween উদাহরণ: Width এবং Opacity পরিবর্তন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Fx.Tween 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() {
var element = document.id('myElement');
// Width এবং Opacity অ্যানিমেট করা
var widthAnimation = new Fx.Tween(element, {
property: 'width',
duration: 1000, // 1 সেকেন্ড
transition: Fx.Transitions.Sine.easeInOut // ট্রানজিশন টাইপ
});
var opacityAnimation = new Fx.Tween(element, {
property: 'opacity',
duration: 1000,
transition: Fx.Transitions.Sine.easeInOut
});
// এনিমেশন শুরু করা
widthAnimation.start(100, 300); // Width 100px থেকে 300px হবে
opacityAnimation.start(0, 1); // Opacity 0 থেকে 1 হবে (অদৃশ্য থেকে দৃশ্যমান)
});
</script>
</head>
<body>
<div id="myElement" style="width: 100px; height: 100px; background-color: blue;">
এটি একটি এলিমেন্ট
</div>
</body>
</html>
এখানে:
Fx.Tweenক্লাস ব্যবহার করেwidthএবংopacityপ্রপার্টি অ্যানিমেট করা হয়েছে।start()মেথড দিয়ে প্রপার্টির পুরোনো এবং নতুন মান নির্ধারণ করা হয়েছে, এবং 1 সেকেন্ডের মধ্যে পরিবর্তন করা হবে।
Fx.Morph
Fx.Morph একটি আরও শক্তিশালী ক্লাস যা একাধিক CSS প্রপার্টি একসাথে পরিবর্তন করতে ব্যবহৃত হয়। এটি multiple CSS properties পরিবর্তন করতে সাহায্য করে, যেমন width, height, top, left, background-color, border-radius ইত্যাদি। Fx.Morph একাধিক প্রপার্টির অ্যানিমেশন সমর্থন করে এবং এর মাধ্যমে আপনি একটি একক এলিমেন্টে অনেক ধরনের অ্যানিমেশন একযোগভাবে তৈরি করতে পারেন।
Fx.Morph উদাহরণ: একাধিক CSS প্রপার্টি পরিবর্তন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Fx.Morph 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() {
var element = document.id('myElement');
// একাধিক CSS প্রপার্টি একসাথে পরিবর্তন করা
var morphAnimation = new Fx.Morph(element, {
duration: 1000, // 1 সেকেন্ডের মধ্যে পরিবর্তন হবে
transition: Fx.Transitions.Quad.easeInOut, // ট্রানজিশন টাইপ
onComplete: function() {
console.log('Animation Complete!');
}
});
// এনিমেশন শুরু করা
morphAnimation.start({
'width': [100, 300], // Width 100px থেকে 300px হবে
'height': [100, 200], // Height 100px থেকে 200px হবে
'opacity': [0, 1], // Opacity 0 থেকে 1 হবে (অদৃশ্য থেকে দৃশ্যমান)
'background-color': ['blue', 'green'] // Background color blue থেকে green হবে
});
});
</script>
</head>
<body>
<div id="myElement" style="width: 100px; height: 100px; background-color: blue;">
এটি একটি এলিমেন্ট
</div>
</body>
</html>
এখানে:
Fx.Morphক্লাস ব্যবহার করে একাধিক CSS প্রপার্টি যেমনwidth,height,opacity, এবংbackground-colorএকসাথে অ্যানিমেট করা হয়েছে।start()মেথডে একাধিক প্রপার্টি এবং তাদের পুরোনো এবং নতুন মান নির্ধারণ করা হয়েছে।
Fx.Tween এবং Fx.Morph এর মধ্যে পার্থক্য
- Fx.Tween:
- একক CSS প্রপার্টি অ্যানিমেট করার জন্য ব্যবহৃত হয়।
- সহজ এবং দ্রুত কাস্টমাইজেবল এনিমেশন তৈরি করা যায়, যেমন শুধুমাত্র
width,height, অথবাopacityপরিবর্তন করা।
- Fx.Morph:
- একাধিক CSS প্রপার্টি একসাথে অ্যানিমেট করার জন্য ব্যবহৃত হয়।
- এটি একাধিক স্টাইল পরিবর্তন করতে সাহায্য করে এবং একটি এলিমেন্টের একাধিক দিক নিয়ন্ত্রণ করা সম্ভব হয় (যেমন সাইজ, রঙ, পজিশন ইত্যাদি)।
সারাংশ
MooTools এর Fx.Tween এবং Fx.Morph ক্লাস ব্যবহার করে CSS প্রপার্টি অ্যানিমেশন তৈরি করা খুবই সহজ। Fx.Tween একটি একক প্রপার্টির অ্যানিমেশন সমর্থন করে, এবং Fx.Morph একাধিক প্রপার্টির একযোগে অ্যানিমেশন তৈরি করতে সহায়তা করে। এদের মাধ্যমে আপনি ওয়েব পেজে ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় ইফেক্ট তৈরি করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
Read more
